关于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个变量datadata2接收series中的2组数据

let data = option.series[0].data;  // 第1组数据
let data2 = option.series[1].data;  // 第2组数据

(2)变量name1name2用来接收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}:数据值

 

posted @ 2022-12-31 07:58  我是冰霜  阅读(230)  评论(0编辑  收藏  举报