Echarts创建百分比圆环饼图

最新推荐文章于 2024-09-03 16:27:12 发布

Da_do

最新推荐文章于 2024-09-03 16:27:12 发布

阅读量1.7k

点赞数 2

文章标签： echarts html5

本文链接：https://blog.csdn.net/Da_do/article/details/116794136

版权

1. 效果图

2. 代码

option = {
    series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "50%"],//圆环大小
            center: ["50%", "50%"],//图表的位置
            avoidLabelOverlap: false,//是否启用防止标签重叠策略
            hoverAnimation:false,//动画效果
            label: {
                show: false,
                position: 'center',
                formatter: '{d}%',// 显示百分比，
            },
            data: [
              { value: '20', 
              itemStyle: {
                  color: "green"
                },
                label:{
                        normal:{
                            show:true
                        }
                    }
              },
              { value: '80',itemStyle: {
                  color: "orange"
                } }
            ]
          }
        ]
};