Echarts legend自定义整齐排列

echarts yekong

Echarts legend自定义

drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var dataList = []
      this.list.forEach((type, index) => {
        var data = {
          value: type.num,
          show: true,
          name: type.alarmDescId,
          itemStyle: {
            normal: {
              color: this.color[index],
              borderWidth: FontChart(2),
              borderColor: '#06264C'
            }
          }
        }
        dataList.push(data)
      });
      var option = {
        legend: {
          orient: 'vertical',
          top: 'center',
          right: '10',
          itemGap: FontChart(10),
          itemWidth: FontChart(10),
          itemHeight: FontChart(10),
          formatter: ["{a|{name}}"].join("\n"),
          width: '10%',
          textStyle: {
            color: 'rgba(190, 198, 218, 1)',
            rich: {
              a: {
                width: FontChart(40)
              }
            }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['30%', '50%'],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter: '{d}%',
              color: '#fff',
              fontSize: FontChart(14)
            },
            labelLine: {
              show: false
            },
            data: dataList
          },
          {
            type: 'pie',
            silent: true,
            center: ['30%', '50%'],
            radius: ['0%', '65%'],
            z: 1,
            itemStyle: {
              normal: {
                color: '#02224D'
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            type: 'pie',
            silent: true,
            center: ['30%', '50%'],
            radius: ['65%', '66%'],
            z: 1,
            itemStyle: {
              normal: {
                color: '#053165'
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            type: 'pie',
            silent: true,
            center: ['30%', '50%'],
            radius: ['25%', '26%'],
            z: 2,
            itemStyle: {
              normal: {
                color: '#053165'
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢