一、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/n/331425.html
微信扫一扫 
支付宝扫一扫 