Echarts饼图4.0（圆弧分段有间隔）

ᥬ 小月亮

已于 2023-06-09 11:10:41 修改

阅读量774

点赞数

分类专栏： Echarts 文章标签： echarts 前端 javascript

于 2023-06-08 16:32:29 首次发布

本文链接：https://blog.csdn.net/Y1914960928/article/details/131110496

版权

Echarts 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

代码：

const value = 0.25 // 外层圆的数值
const centerLabel = {
  name: '文字123',
  value: 1234,
  unit: '单位'
}
option = {
    series: [
      { // 外层圆
        type: 'pie',
        radius: ['80%', '83%'],
        center: ['50%', '50%'],
        silent: true, // 图形不响应和触发鼠标事件
        min: 0,
        max: 1,
        data: [{
          value: Math.floor((Math.abs(value) * 100)),
          itemStyle: {
            color: '#d0021b',
            borderCap: 'round',
            borderRadius: '100%'
          },
          label: {
            show: false
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0
              }
            }
          },
          hoverAnimation: false
        },
        {
          label: {
            show: false
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0
              }
            }
          },
          value: 100 - Math.floor((Math.abs(value) * 100)),
          hoverAnimation: false,
          itemStyle: {
            color: '#e6e6e6',
            emphasis: { // 鼠标移入不高亮
              color: '#e6e6e6'
            }
          }
        }
        ]
      },
      { // 内部的饼图
        type: 'pie',
        radius: ['60%', '70%'],
        avoidLabelOverlap: false,
        emphasis: {
          // disabled: true
          label: {
            
          }
        },
        labelLine: {
          show: false
        },
        label: {
          show: true,
          formatter: [`{a|${centerLabel.value}}{b|${centerLabel.unit}}`, `{c|}`, `{d|${centerLabel.name}}`].join('\n'),
          position: 'center',
          rich: {
            a: {
              fontSize: 72,
              color: '#333',
              textAlign: 'center',
              padding: [0, 0, 12, 0]
            },
            b: {
              padding: [8, 6, 6, 6],
              fontSize: 20,
              color: '#666',
              verticalAlign: 'top'
            },
            c: {
              width: '100%',
              height: 2,
              backgroundColor: '#dadde4',
              align: 'left'
            },
            d: {
              fontSize: 36,
              color: '#999',
              padding: [20, 0, 12, 0]
            }
          }
        },
        data: [
          {
            value: 1048, 
            name: 'Search Engine',
            itemStyle: {
              borderCap: 'round',
              borderRadius: '100%',
              borderWidth: 10,	//边框的宽度
              borderColor: '#fff'	//边框的颜色
            }
          },
          { 
            value: 735,
            name: 'Direct',
            itemStyle: {
              borderCap: 'round',
              borderRadius: '100%',
              borderWidth: 10,	//边框的宽度
              borderColor: '#fff'	//边框的颜色
            }
          },
          { 
            value: 580,
            name: 'Email',
            itemStyle: {
              borderCap: 'round',
              borderRadius: '100%',
              borderWidth: 10,	//边框的宽度
              borderColor: '#fff'	//边框的颜色
            }
          }
        ]
      }
    ]
  }