Echarts环形图自定义图例

最新推荐文章于 2024-07-25 21:03:55 发布

橙汁梨子

最新推荐文章于 2024-07-25 21:03:55 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/ABC89153/article/details/125168055

版权

项目场景：

在展示图表的时候有的时候需要图例也展示出一些内容来，例如这样子：
在这里插入图片描述

描述

普通的图例一般只是这样在这里插入图片描述

但我们希望展示更多的信息，于是需要使用一个东西：字符串模板：formatter

解决方案：

直接上代码

在 data() 中定义一个对象，可以设置图例的一些样式和位置

 data() {
    return {
      legendData: {
        orient: 'vertical',
        left: '40%',
        top: 'center',
        icon: 'circle', // 图例色块是方还是圆
        itemGap: 20,
        itemWidth: 8,
        padding: 0,
        selectedMode: false,
        triggerEvent: true,
        textStyle: { // 字符串模板
          rich: {
            a: {
              align: 'left',
              color: '#19273B',
              width: 130,
              padding: [0, 8, 0, 0]
            },
            b: {
              align: 'left',
              color: '#8D97A4',
              width: 55,
              padding: [0, 8, 0, 0]
            },
            c: {
              align: 'left',
              color: '#19273B'
            }
          }
        }
      }
    }
  }

具体图的代码

    //环形图
    initCircularChart() {
      var echarts = require('echarts')  // 初始化
      var circularChart = document.getElementById('circularChart') // 对应地使用ByClassName
      // 处理图例中的数据
      const _that = this
      _that.legendData.formatter = function(name) {
          // _that.reasonInfoList 环形图的数据
          let str = ''
          let rate
          let value
          for (let i = 0; i < _that.reasonInfoList.length; i++) {
              if (_that.reasonInfoList[i].name === name) {
                  rate = toThousandFilter(_that.reasonInfoList[i].rate * 100) // 这里我处理了一下百分数
                  value = _that.reasonInfoList[i].value
                  str = `{a|${name}} {b|${rate}%} {c|${value}}`
                  return str // 因为只能返回一个值 所以将一行数据拼成一个字符串
              }
          }
      }
      var myChart = echarts.init(circularCharts, walden)// walden: 主题
          myChart.setOption({
            title: {
              text: '失败原因', // 图的名字
              left: 'left',
              triggerEvent: true
            },
            legend: this.legendData, // 图例直接引用
            series: [{
              type: 'pie',
              radius: [45, 65],
              center: ['20%', '50%'],
              hoverAnimation: false, // true 鼠标移入会放大
              label: { // 环形图中间部分显示所有的总数
                show: true,
                position: 'center',
                fontSize: '12',
                formatter: `{a|${failedOrderNum}}` + '\n' + `{b|${'订单总数'}}`,
                rich: {
                  a: {
                    color: '#19273B'
                  },
                  b: {
                    color: '#8D97A4'
                  }
                }
              },
              data: this.reasonInfoList, // 所有数据的数组
              stillShowZeroSum: true // 是否在数据和为0（一般情况下所有数据为0) 的时候仍显示扇区
         }]
      })
    }