一、echarts自定義tooltips
tooltip是指當滑鼠移動到圖表上時顯示的信息窗口。echarts默認的tooltip樣式已經非常美觀和實用，但有時候我們需要根據實際需求自定義tooltip。這時候我們需要用到echarts的formatter函數來自定義tooltip的內容和樣式。
下面是一個簡單的例子。首先定義一個包含所有數據的數組，然後使用formatter函數將tooltip內容設置為數據數組中對應的值。
var data = [
{name:"北京", value:"123"},
{name:"上海", value:"234"},
{name:"廣州", value:"345"}
];
option = {
...
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.name+': '+params.value;
}
},
...
};
這段代碼中的formatter函數會接收到一個params參數，包含了當前滑鼠所在的數據項的各種信息。我們可以根據需要選擇需要的信息來格式化tooltip的內容。
二、echarts自定義tooltip帶symbol
有時候我們需要在tooltip中顯示一個符號來標註數據項，這時候我們可以使用rich屬性來自定義symbol。先來看一個簡單的例子：
option = {
...
series: [{
type: 'line',
data: [10, 22, 32, 45, 38, 56, 74],
markPoint: {
label: {
formatter: '{b}'
},
data: [{
type: 'max',
name: '最大值'
},{
type: 'min',
name: '最小值'
}]
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
formatter: function(params) {
var dataIndex = params[0].dataIndex;
var value = params[0].value;
return '第'+dataIndex+'個數據項：'+value;
},
position: function(pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
extraCssText: 'background-color: rgba(255, 255, 255, 0.8);border-radius:3px'
},
itemStyle: {
color: '#1C86EE'
},
lineStyle: {
color: '#1C86EE'
}
}],
...
};
這個例子中，我們使用了echarts的rich屬性來自定義一個symbol，在formatter中將其插入到tooltip中。
三、echarts自定義tooltip帶圖形
有時候我們需要在tooltip中顯示一個圖形來表示數據項，這時候我們可以使用formatter函數和echarts.graphic來自定義圖形。下面是一個簡單的例子：
option = {
...
series: [{
type: 'line',
data: [10, 22, 32, 45, 38, 56, 74],
markPoint: {
label: {
formatter: '{b}'
},
data: [{
type: 'max',
name: '最大值'
},{
type: 'min',
name: '最小值'
}]
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
formatter: function(params) {
var dataIndex = params[0].dataIndex;
var value = params[0].value;
return '第'+dataIndex+'個數據項：'+value;
},
position: function(pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
extraCssText: 'background-color: rgba(255, 255, 255, 0.8);border-radius:3px',
formatter: function(params) {
var dataIndex = params[0].dataIndex;
var value = params[0].value;
var iconSize = 20;
var icon = new echarts.graphic.Rect({
shape: {
x: -iconSize / 2,
y: -iconSize / 2,
width: iconSize,
height: iconSize
},
style: {
fill: '#1C86EE',
stroke: '#fff',
lineWidth: 2
}
});
return icon + '第'+dataIndex+'個數據項：'+value;
}
},
itemStyle: {
color: '#1C86EE'
},
lineStyle: {
color: '#1C86EE'
}
}],
...
};
在這個例子中，我們在formatter函數中使用了echarts.graphic.Rect來自定義了一個矩形。同樣，我們可以使用其他的圖形來自定義tooltip。
四、echarts自定義圖例css
我們可以使用echarts.graphic來自定義圖例的樣式，來達到修改圖例樣式的目的。這個樣式的圖例可以居中顯示，有動畫效果。
option = {
...
legend: {
data: ['商品1', '商品2', '商品3'],
bottom: '5%',
textStyle: {
color: '#fff'
},
icon: 'none',
selectedMode: 'single',
selected: {
'商品1': true
},
animationDelay: 1500,
animationDuration: 800,
animationEasing: 'elasticOut',
formatter: function(name) {
var iconSize = 10;
var icon = new echarts.graphic.Rect({
shape: {
x: -iconSize / 2,
y: -iconSize / 2,
width: iconSize,
height: iconSize
},
style: {
fill: '#1C86EE',
stroke: '#fff',
lineWidth: 2
}
});
return icon + ' ' + name;
}
},
...
};
五、echarts自定義圖形
我們可以使用echarts.graphic來自定義圖形，例如圓、矩形等。下面是一個簡單的例子，畫出一個圓形：
option = {
...
graphic: [{
type: 'circle',
shape: {
cx: 250,
cy: 150,
r: 100
},
style: {
fill: 'transparent',
stroke: '#1C86EE',
lineWidth: 4
}
}],
...
};
這個例子中，我們使用echarts.graphic創建了一個圓形，並將其添加到了option的graphic屬性中。在style中可以對圖形進行樣式設置。
六、echarts自定義圖例
echarts默認的圖例是按照數據系列自動生成的，我們可以使用formatter函數來自定義圖例。下面是一個簡單的例子：
option = {
...
legend: {
data: ['男性用戶數', '女性用戶數'],
textStyle: {
color: '#fff'
},
formatter: function(name) {
if (name == '男性用戶數') {
return '♂ ' + name;
}
else {
return '♀ ' + name;
}
}
},
series: [{
data: [152, 64],
...
},{
data: [113, 85],
...
}],
...
};
在這個例子中，我們使用了formatter函數來自定義圖例，對男性用戶數添加了♂標誌，對女性用戶數添加了♀標誌。
七、echarts自定義icon
我們可以使用echarts.graphic自定義icon來代替默認的圖例標記。下面是一個簡單的例子：
option = {
...
legend: {
data: ['男性用戶數', '女性用戶數'],
textStyle: {
color: '#fff'
},
icon: 'none',
formatter: function(name) {
if (name == '男性用戶數') {
var iconSize = 15;
var icon = new echarts.graphic.Rect({
shape: {
x: -iconSize / 2,
y: -iconSize / 2,
width: iconSize,
height: iconSize
},
style: {
fill: '#1C86EE',
stroke: '#fff',
lineWidth: 2
}
});
return icon + ' ' + name;
}
else {
var iconSize = 15;
var icon = new echarts.graphic.Polygon({
shape: {
points: [[-iconSize / 2, -iconSize / 2], [iconSize / 2, -iconSize / 2], [0, iconSize / 2]],
},
style: {
fill: '#FFA07A',
stroke: '#fff',
lineWidth: 2
}
});
return icon + ' ' + name;
}
}
},
series: [{
data: [152, 64],
...
},{
data: [113, 85],
...
}],
...
};
在這個例子中，我們對每個圖例都使用了不同的圖標來表示不同的數據系列。使用不同的echarts.graphic來繪製出我們需要的圖標。
八、echarts自定義y軸刻度間距選取
有時候我們需要更細緻地控制y軸刻度之間的間距，比如在數據範圍比較小的情況下，我們需要將y軸刻度之間距離增加，否則會非常擁擠難以閱讀。下面是一個簡單的例子：
option = {
...
yAxis: {
type: 'value',
interval: 20,
splitNumber: 6
},
...
};
在這個例子中，我們將y軸刻度之間的距離設置為20，刻度數目為6，這樣就可以有效地控制y軸的刻度間距，使圖表更易讀。
原創文章，作者：WNFDZ，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/331096.html
微信掃一掃 
支付寶掃一掃 