Angular项目中实现图表，Echarts中自定义legend/tooltip/series-label

近期实现图表，很多字段需要自定义，显示请求回来的数据，下述文章给了我很大启示，介绍也比较全面：

https://www.jianshu.com/p/4f459d16e8b4

下面是我自己的代码，会发现主要是通过formatter函数来实现，关于formatter函数的介绍我还没有找到，等找到后再来分享：

效果图如下：

首先是中间蓝色框里的内容自定义，主要自定义series-label，这里自定义的数值30，是从服务端请求回来的一个总值，最初实现的时候，总是拿不到该值，通过formatter函数传过来，拿v渲染的时候，因为此处是循环遍历的，因此最后渲染出来的是无效的，并不是拿到30直接渲染了，最后我通过全局变量来接收，而该值定义在全局的时候，因为图表在首次刷新的时候是拿不到动态值的，因此我把他赋值在了tooltip中，成功拿到了该值并渲染出来。

        label: {
          normal: {
            show: true,
            position: 'center',
            data: 0,
            formatter: (v) => {
              return ['{a|' + this.assetPositon.tooltip.data + '}', '{n|资产总数}'].join('\n');
            },
            rich: {
              a: {
                color: '#666',
                fontSize: 18,
                height: 30,
                verticalAlign: 'bottom',
                fontWeight: 'bold',
                align: 'center'
              },
              n: {
                color: '#999',
                fontSize: 16,
                align: 'center',
                padding: 15,
                fontWeight: 'normal'
              }
            }
          }
        },

红色框里的内容：

    tooltip: {
      trigger: 'item',
      formatter: '{a} 
{b}: {c} ({d}%)',
      data: 0,
    },

 绿色框里的内容很容易实现，但是加了黄色框之后，需要动态获取数据：

    legend: {
      right: '30%',
      itemWidth: 8,
      itemHeight: 8,
      show: true,
      orient: 'vertical',
      y: 'middle',
      align: 'left',
      formatter: (data) => {
        const len = this.assetPositon.series[0].data.length;
        if (len) {
          // tslint:disable-next-line: prefer-for-of
          for (let i = 0; i < len; i++) {
            if (this.assetPositon.series[0].data[i].name === data) {
              return data + '   ' + this.assetPositon.series[0].data[i].value;
            }
          }
        }
      }
    },

series序列内数据值格式化效果图，内容来源于：https://www.cnblogs.com/ys-wuhan/p/6149265.html

关于更多地方需要使用格式化方法可以继续浏览更多精彩文章，同时也可以进入官网查看API文档。这里补充一下formatter格式化方法的参数说明：

{string}，模板（Template），其变量为：

{a} | {a0}

{b} | {b0}

{c} | {c0}

{d} | {d0} （部分图表类型无此项）

多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...

其中变量a、b、c在不同图表类型下代表数据含义为：

折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）

散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）

饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）

弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)

力导向图 :

节点 : a（类目名称），b（节点名称），c（节点值）

边 : a（系列名称），b（源名称-目标名称），c（边权重）， d（如果为true的话则数据来源是边）

{Function}，传递参数列表如下：

params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...]

ticket : 异步回调标识

callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html