ECharts饼状图lable显示Value所占百分比

最新推荐文章于 2023-12-15 11:35:33 发布

意桉

最新推荐文章于 2023-12-15 11:35:33 发布

阅读量2.3k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_44244924/article/details/129839570

版权

ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比
简单的实现可以参考：

export default {
  data() {
    return {
      
    }
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.main);
      // 设置饼图的数据
      var data = [{
            name: 'A',
            value: 34,
          },
          {
            name: 'B',
            value: 25,
          },
          {
            name: 'C',
            value: 12,
          },
          {
            name: 'D',
            value: 13,
          }];
        // 获取所有value相加的和
       let total = data.reduce((a, b) => {
          return a + b.value * 1;
      }, 0);
      myChart.setOption({
        title: {
          text: '站点状态统计', //图标的名称
          left: 'center',  // 图标的位置
          top: 'center'
        },
        series: [{
          name: '', //
          type: 'pie',  // 设置图表类型（柱状图， 饼图.......）
          data: data,
          radius: ['50%', '70%'], //通过radius设置圆环图
          itemStyle: {},
          labelLine: {
                normal: {
                  length: 5,
                  length2: 20,
                  lineStyle: {
                    color: "#333",
                  },
                },
              },
          label: {
                normal: {
                  show: true,
                  position: "outside",
                  color: "#333",  // lable 文字颜色
                  formatter: (params) => { //设置lable显示Value所占百分比
                    return ((params.value / total) * 100).toFixed(2)+'%';
                  },
                  padding: [0, 0, 0, 0],
                  rich: {
                    icon: {
                      fontSize: 16,
                    },
                    name: {
                      fontSize: 14,
                      padding: [0, 10, 0, 4],
                      color: "#666666",
                    },
                    value: {
                      fontSize: 18,
                      fontWeight: "bold",
                      color: "#333333",
                    },
                  },
                },
              },
        }],
        color: [{
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops:[{
              offset: 0,
              color: 'red'
            }, {
              offset: 1,
              color: 'blue'
            }] 
          },  // 设置渐变色
          'rgb(225,124,226)',
          'rgb(14,124,226)',
          'rgb(255,131,882)',  
          'rgb(248,69,107)',
          'rgb(248,345,764)'],
       legend: { // 设置图例
       data: ['A','B', 'C','D'],
       backgroundColor: '#ccc', // 设置图例背景颜色
       textStyle: {
        color: 'black'   // 设置文字颜色
      },
      // x: "50%",
      y: "90%",
      icon: 'circle',  //图例的样式
      bottom: 0,
      formatter: (params) => { //设置lable显示Value所占百分比
        const val = data.filter(item => {
        return item.name === params
      })
      return params + '  ' + ((val[0].value / total) * 100).toFixed(2)+'%';
      },
    },
    tooltip: { // 鼠标悬停时显示
            trigger: 'item'
          },
    
    });
    }
  } 
 }