echarts pie 饼状图使用记录

jqh_0484

已于 2023-12-15 15:16:46 修改

阅读量515

点赞数 7

文章标签： echarts 前端 javascript

于 2023-12-15 13:58:32 首次发布

本文链接：https://blog.csdn.net/qq_37309987/article/details/135015489

版权

1、实现效果如下

option = {
        title: {
          subtext: '单位：亿元',
          top: '5%'
        },
        legend: {
          data: ['rose 1', 'rose 2', 'rose 3', 'rose 4'],
          itemWidth: 12,
          itemHeight: 12,
          icon: 'rect'
        },
        series: [
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [40, 80],
            center: ['50%', '50%'],
            label: {
              show: false,
              formatter(param) {
                return param.name + '\n' + param.percent * 2;
              }
            },
            itemStyle: {
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            data: [
              { value: 30, name: 'rose 1' },
              { value: 28, name: 'rose 2' },
              { value: 26, name: 'rose 3' },
              { value: 24, name: 'rose 4' }
            ]
          }
        ],
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              text: '12345',
              textAlign: 'center',
              fill: '#253440',
              fontSize: 14,
              fontWeight: 'bold'
            }
          }
        ]
      }

替换配置查看效果：
Examples - Apache ECharts