关于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}：数据值