echarts 饼状图 标题居中

echarts yekong

echarts 饼状图 标题居中

标题代码

title: [{
  text: '64',
  left: 'center',
  y: '42%',
  textStyle: {
    fontSize: FontChart(26),
    fontWeight: '500',
    color: '#14a6f8',
    textAlign: 'center',
    fontFamily: 'DigitalDismay',
  },
}, {
  text: '总数量',
  left: 'center',
  top: '52%',
  textStyle: {
    fontSize: FontChart(14),
    fontWeight: '400',
    color: '#C7CFDC',
    textAlign: 'center',
    fontFamily: 'DigitalDismay',
  },
}]

完整代码

drawLine() {
  window.addEventListener('resize', this.drawLine)
  let myChart = this.$echarts.init(this.$refs.echarts1)
  var colors = this.colorList
  var data = [
    {
      name: '区域入侵',
      value: 40
    },
    {
      name: '工服',
      value: 30
    },
    {
      name: '未系安全带',
      value: 45
    },
    {
      name: '安全带',
      value: 47
    },
    {
      name: '抽烟',
      value: 38
    }
  ]
  var colorList2 = ['rgba(20, 51, 204, 1)', 'rgba(212, 33, 1, 1)', 'rgba(164, 38, 255, 1)', 'rgba(0, 242, 254, 1)', 'rgba(219, 108, 18, 1)',]
  var option = {
    color: colors,
    title: [{
      text: '64',
      left: 'center',
      y: '42%',
      textStyle: {
        fontSize: FontChart(26),
        fontWeight: '500',
        color: '#14a6f8',
        textAlign: 'center',
        fontFamily: 'DigitalDismay',
      },
    }, {
      text: '总数量',
      left: 'center',
      top: '52%',
      textStyle: {
        fontSize: FontChart(14),
        fontWeight: '400',
        color: '#C7CFDC',
        textAlign: 'center',
        fontFamily: 'DigitalDismay',
      },
    }],
    legend: {
      show: true,
      orient: 'horizontal',
      top: FontChart(0),
      right: 'center',
      itemGap: FontChart(20),
      itemWidth: FontChart(20),
      itemHeight: FontChart(14),
      width: '100%',
      textStyle: {
        color: '#fff',
        fontSize: FontChart(14)
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} {b} : {c} ({d}%)'
    },
    series: [
      {
        name: 'AI告警类型占比 (当日)',
        type: 'pie',
        radius: ['40%', '55%'],
        center: ['50%', '50%'],
        label: {
          show: true,
          normal: {
            fontSize: FontChart(14),
            color: 'rgba(0, 172, 255, 1)',
            formatter: function (params) {
              console.log(params)
              return params.name + ' ' + params.percent + '%' + '\n' + params.value
            }
          }
        },
        labelLine: {
          length: FontChart(20),
          length2: FontChart(20)
        },
        data: data
      },
    ]
  }
  myChart.clear()
  myChart.resize()
  myChart.setOption(option)
},
喜欢