echarts 圆环图虚线装饰中间文字_echarts圆环图虚线-CSDN博客

本文链接：https://blog.csdn.net/Y13349887034/article/details/133309008

文章描述了一个使用颜色编码和图表（包括饼图和虚线圆环gauge）来展示土地利用方式的数据可视化组件，通过百分比表示各类别的占比，辅助理解和分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

let option = {
        color: ['#ff7547', '#48dc41', '#7054ff', '#ff00a8', '#0211e7', '#00a0ff'],
        tooltip: {
          trigger: 'item',
        },
        title: {
          subtext: '土地利用方式', //副标题文本
          left: 'center',
          top: '43%',
          left: '20.5%',
          subtextStyle: {
            fontFamily: '微软雅黑',
            fontSize: 13,
            color: '#fff',
          },
        },
        legend: {
          orient: 'vertical',
          type: 'scroll',
          width: '50%',
          pageIconColor: '#fff',
          pageButtonGap: 25,
          pageButtonItemGap: 25,
          pageTextStyle: {
            color: '#fff',
          },
          right: '10%',
          top: 'center',
          textStyle: {
            color: '#cad3d9',
            fontSize: 14,
          },
          formatter: function(name) {
            let data = option.series[0].data;
            // console.log(data, 'data')
            let total = 0;
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let p = Math.round((tarValue / total) * 100) + '%';
            return `${name}   ${p}`;
          },
          icon: 'circle',
          itemHeight: 8,
          itemWidth: 8,
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['55%', '65%'],
            center: ['30%', '53%'],
            data: this.pieData,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
          {
            //虚线圆环
            type: 'gauge',
            startAngle: 270,
            endAngle: -89.9999,
            center: ['30%', '53%'],
            radius: '49%',
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitNumber: 40, //虚线的个数
            axisLine: {
              show: false,
              lineStyle: {
                color: [[1, 'rgba(65, 184, 131,0.8)']],
                width: 20,
              },
            },
            splitLine: {
              length: 5, //每个虚线的宽度厚度
              lineStyle: {
                width: 3, //每个虚线的长度
                color: 'rgba(65, 184, 131,0.8)',
              }, //刻度节点线
            },
            detail: {
              show: false,
            },
          },
        ],
      };