双圆，外层展示数据 ECharts Gallery

20:11:45图表已生成
代码
//   数据

  total = [ 
        {
            name: '土建',
            value: 2,
            itemStyle: {
                    normal:{ color: '#37AAFF'}
            }
        },
        {
            name: '线路',
            value: 2,
            itemStyle: {
                    normal:{ color: '#0BE8D9'}
            }
        },
        {
            name: '变电',
            value: 2,
            itemStyle: {
                    normal:{ color: '#FFC90D'}
            }
        } 
    ];
  
//  配置
  option = {
      title: {
        //   总数样式
          text: '总数',
          subtext: total.length,
          x: 'center',
          y: '41%',
        //   总数字体
          textStyle: {
              fontWeight: '600',
              fontSize: 30,
              color: 'red',
          },
        //   数量样式
          subtextStyle: {
              fontSize: 50,
              color: 'orange'
          },
      },
        // 鼠标移动到图上时的提示消息
      tooltip: {
          show: true,
          trigger: 'item',
        //   formatter可以为函数，自定义提示信息
        //   formatter: "{b}：{c}个<br/>占比：({d}%)"
        formatter: function(item) {
            return `<p>  ` + item.name  + ` : 共 ` + item.value +  ` 个 </p> <br>  <p> 占比 ` +  item.rate +` % </p>`
        }
      },
      series: [{
              itemStyle: {
                  normal: {
                      
                  },
              },
              type: 'pie',
              stillShowZeroSum: true,
              radius: ['60%', '65%'],
              label: {
                  normal: {
                      position: 'inner',
                      show: false,
                      textStyle: {
                          color: '#fff',
                          fontSize: 12
                      }
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data: total
          },
          // 内层圆线
          {
              type: 'pie',
              hoverAnimation: false, //鼠标经过的特效
              radius: ['55%', '54%'],
              center: ['50%', '50%'],
              startAngle: 225,
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              label: {
                  normal: {
                      position: 'center'
                  }
              },
              data: [{
                      value: 1,
                      itemStyle: {
                          normal: {
                              color: 'rgba(32, 143, 173, 1)'
                          }
                      },
                  },

              ]
          },
      ]
  };
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
