echarts 双层饼图记录

南桥几经秋_

已于 2024-01-23 18:11:56 修改

阅读量399

点赞数 10

分类专栏： echarts相关案例记录文章标签： echarts javascript 前端

于 2024-01-22 18:42:41 首次发布

本文链接：https://blog.csdn.net/qq_41615201/article/details/135755604

版权

echarts相关案例记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

示例

在这里插入图片描述

代码

let value = 80
option={
    backgroundColor: '#140a69',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(69, 14, 255,0.5)',
      borderWidth: '0',
      textStyle: {
        color: '#6DFFFF'
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    title: {
      text: `${value}%`,
      x: 'center',
      y: 'center',
      textStyle: {
        color: 'rgba(102, 255, 255, 0.7)',
        fontSize: 39,
        position: 'center' // 展示在中间位置
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['75%', '90%'],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: 'center'
          }
        },
        data: [
          {
            value: value,
            name: '',
            itemStyle: {
              normal: {
                color: '#66FFFF'
              }
            }
          },
          {
            value: 100 - value,
            name: '',
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#FFE457'
              }
            }
          }
        ]
      },
      {
        type: 'pie',
        radius: ['60%', '75%'],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: 'center'
          }
        },
        data: [
          {
            value: value,
            name: '',
            itemStyle: {
              normal: {
                color: '#0DBBB3'
              }
            }
          },
          {
            value: 100 - value,
            name: '',
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#DEA60F'
              }
            }
          }
        ]
      }
    ]

  }