echarts饼图自定义label，圆角饼图

最新推荐文章于 2024-04-03 19:19:48 发布

可乐喜欢加冰

最新推荐文章于 2024-04-03 19:19:48 发布

阅读量1.6k

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_43244730/article/details/130108937

版权

这里写自定义目录标题

- 示例图
- 代码如下：

示例图

在这里插入图片描述

代码如下：

const chartData = [
  {
    value: 30,
    name: "停用",
  },
  {
    value: 160,
    name: "生效",
  },
  {
    value: 50,
    name: "待生效",
  },
];
const colorList = [
  '#00D0CA', '#FF6D39', '#016EFF'
];
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
const pieData1 = [];
for (let i = 0; i < chartData.length; i++) {
  pieData1.push({
    ...chartData[i],
    itemStyle: {
      borderRadius: 25,
      shadowColor: "#2a2a34",
    },
  });
}

option = {
    title: {
    text: "7789",
    subtext:'总数(个)' ,
    textStyle: {
        fontSize: 20,
        fontWeight: 600,
        color: '#016EFF',
        textShadow: '0px 2px 4px rgba(0,0,0,0.05)',
    },
    subtextStyle: {
      fontSize: 12,
      color: '#89909D',
    },
    x: "center",
    y: "center",
  },
  backgroundColor: "#fff",
  color: colorList,
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(0,0,0,0.7)', //设置背景图片 rgba格式
    borderWidth: '1',
    borderColor: '#ccc',
    textStyle: {
        color: '#fff', //设置文字颜色
    },
  },
  series: [
    {
      type: "pie",
      z: 3,
      roundCap: true,
      radius: ["44%", "51%"],
      center: ["50%", "50%"],
      label: {
        show: true,
        formatter: function(pram){
                    return '{a|'+pram.name+'}'+'   '+'{b|'+pram.value+'% }'
                },
                padding:[0,-100,20,-100],//关键代码！关键代码！关键代码！
              rich: {
                a: {
                  fontSize:14,
                  color:'#000',
                  fontWeight:500,
                  lineHeight: 32,
                  align: "right",
                },
                b: {
                    color:'#016EFF' ,
                    fontWeight:600,
                    fontSize:16,
                }
              },
      },
      labelLine: {
        show: true,
        length: 50,
		length2: 120,
		color: "#00ffff"
      },
      data: pieData1,
    },
    {
      type: "pie",
      z: 2,
      radius: ["40%", "55%"],
      center: ["50%", "50%"],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      silent: true,
      data: [
          {
            value: '100',
            itemStyle: {
              color: '#F1F2F5',
              opacity: 0.8,
            },
          }
      ],
    },
  ],
};