v-charts 使用教程/笔记（二）自定义legend / legend的富文本怎么使用

此篇内容是参考csdn文章的方法

自定义legend

项目中会有自定义的需求，拿v-chart官方的代码作为例子。
官方默认legend的款式是这样的。

设计稿是这样的

这种样式大大不同，我们就需要用到e-charts的legend属性了
根据上一篇使用教程，使用extend属性进行配置

  data () {
    return {
    //在v-charts官方文档可以查看到的配置信息
      chartSettings: {
      //圆的半径
        radius: [30, 60],
        offsetY: 60,
        labelLine: {
          show: false
        },
        label: {
          show: false
        },
        itemStyle: {
          normal: {
            color: function (params) {
              // 自定义颜色
              let colorList = [
                '#975fe5', '#f2637b', '#f1cc36', '#4ecb73', '#36cbcb', '#975fe5', '#f2637b', '#f1cc36', '#4ecb73', '#36cbcb'
              ]
              return colorList[params.dataIndex]
            }
          }

        }
      },
      chartEntend: {
        legend: {
        //可查看官方配置文档，left：'center'的意思是居中
          left: 'center',
          //垂直排列
          orient: 'vertical',
          //设置高度
          height: '120px',
          bottom: 0,
          formatter: (name) => {
            let param = ''
            if (this.chartData) {
              param = this.chartData.rows.find(item => {
                return item['航班'] === name
              })['班次']
            }
            return '{label|' + name + '}' + '{value|' + param + '班' + '}'
          },
          textStyle: {
            rich: {
              label: {
                color: '#4d5574',
                width: 30
              },
              value: {
                color: '#fff',
                width: 50
              }
            }
          }
        },
        title: {
          text: '货量',
          y: 'top',
          left: 60,
          top: '140px',
          textStyle: {
            color: '#fff',
            fontSize: 15
          }
        },
        //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
        series: {
          center: [80, 60]
        }
      },
      chartData: {
        columns: ['航班', '班次'],
        rows: [
          { '航班': '3U', '班次': 2 },
          { '航班': '5J', '班次': 7 },
          { '航班': 'AE', '班次': 46 },
          { '航班': 'CL', '班次': 9 },
          { '航班': 'FE', '班次': 9 },
          { '航班': 'KA', '班次': 102 },
          { '航班': 'MI', '班次': 4 },
          { '航班': 'NH', '班次': 31 },
          { '航班': 'PR', '班次': 50 },
          { '航班': 'TG', '班次': 29 }
        ]
      }
    }
  },