echarts 圆环图虚线装饰中间文字

最新推荐文章于 2023-11-21 10:56:41 发布

不吃糖的哼哼

最新推荐文章于 2023-11-21 10:56:41 发布

阅读量345

点赞数 2

分类专栏： js echarts 文章标签： echarts javascript

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

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

echarts

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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,
            },
          },
        ],
      };