关于echarts使用的一些tips
本文总结一下关于echarts使用的一些小技巧,助力显示样式更美观
1、饼图设置可滚动图例
有时图表中的图例太多,一行放不下,此时可使用滚动图例,如下
图例不可滚动
图例可滚动,在lengend下添加type: 'scroll'
2、图例后显示自定义数值
一般情况下,图例后面是不会显示数值的,需要进行相关设置才可以在图例后面显示对应的数值,下面是折线图和饼图的图例
在legend中使用回调函数配置formatter
先来看一下折线图,折线图中有2组数据,2组数据的格式如下
'create_date_result': [0, 0, 3, 11, 19, 0, 0]
'resolution_date_result': [0, 0, 0, 8, 14, 0, 5]
在lenged配置下配置formatter回调函数
legend: {
top: '8%',
left: '10%',
formatter: function (name) { //图例后添加数值
let data = option.series[0].data; // 第1组数据
let data2 = option.series[1].data; // 第2组数据
let name1 = option.series[0].name; // 第1组数据的name
let name2 = option.series[1].name; // 第2组数据的name
let tarValue; // 定义一个最终结果变量
let total1 = 0; // 定义一个变量,接收第1组数据的和
let total2 = 0; // 定义一个变量,接收第2组数据的和
for (let i = 0; i < data.length; i++) {
total1 += data[i];
total2 += data2[i];
if (name === name1) {
// 如果模版变量name=name1,就把第1组数据的和total1赋给tarValue
tarValue = total1;
}
else {
// 如果模版变量name=name2,就把第1组数据的和total2赋给tarValue
tarValue = total2;
}
}
return name + ": " + tarValue;
}
},
(1)这个折线图有2组数据,代码中先定义了2个变量data
和data2
接收series中的2组数据
let data = option.series[0].data; // 第1组数据
let data2 = option.series[1].data; // 第2组数据
(2)变量name1
和name2
用来接收2组数据的名称
(3)因为需要计算每组数据的总和,所以定义了变量total1和total2,分别用来接收2组数据的和;另外定义了中间变量tarValue,用来表示最终显示的结果
let tarValue; // 定义一个最终结果变量
let total1 = 0; // 定义一个变量,接收第1组数据的和
let total2 = 0; // 定义一个变量,接收第2组数据的和
(4)for循环用来计算total1和tiotal2,最后把图例名称+最终计算结果返回出去即可
饼图的实现逻辑和折线图类似,计算各个图例数据的和返回出去即可,如下formatter回调函数
legend: {
// orient: 'vertical',
// left: "left",
type: 'scroll', //图例可滚动
// orient: 'vertical',
top: 'bottom',
formatter: function (name) { //图例后添加数值
let data = option.series[0].data;
let tarValue;
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
tarValue = data[i].value;
}
}
return name + ": " + tarValue;
}
},
3、旭日图显示每个数据的值
在series.lable下以字符串模板形式配置formatter
option = {
series: {
type: 'sunburst',
// emphasis: {
// focus: 'ancestor'
// },
data: data,
radius: [0, '90%'],
label: {
rotate: 'radial',
formatter: '{b} : {c}'
}
}
};
字符串模板 模板变量有:
{a}
:系列名{b}
:数据名{c}
:数据值