【echarts饼图】legend显示data中的name和value

最新推荐文章于 2024-07-29 13:58:45 发布

白桃与猫

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量4.3k

点赞数

分类专栏： echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_52395343/article/details/132062699

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

legend自定义显示格式：

 legend: {
    formatter: function (name) {
      let v;
      optionCheck.series.data.forEach((item) => {
        if (item.name === name) {
          v = item.value;
        }
      });
      return name + ' ' + v;
    },
  },

全部配置项：

const optionCheck = reactive({
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    right: 'right',
    y: 'center',
    // 设置图例形状
    icon: 'circle',
    itemWidth: 16, // 设置宽度
    itemHeight: 16, // 设置高度
    textStyle: {
      fontSize: 14,
    },
    formatter: function (name) {
      let v;
      optionCheck.series.data.forEach((item) => {
        if (item.name === name) {
          v = item.value;
        }
      });
      return name + ' ' + v;
    },
  },
  series: {
    type: 'pie',
    labelLine: {
      show: false,
    },
    label: {
      show: false,
    },
    emphasis: {
      label: {
        show: false,
      },
    },
    radius: ['50%', '70%'],
    // 设置饼状图在画布中的位置
    center: ['20%', '50%'],
    data: [],
  },
});