圆形多线图

陌影-

已于 2023-12-15 15:22:31 修改

阅读量399

点赞数 7

文章标签： echart

于 2023-12-15 15:22:15 首次发布

本文链接：https://blog.csdn.net/shi19970609/article/details/135018251

版权

const gaugeData = [
  {
    value: 80,
    name: 'Perfect',
    title: {
      offsetCenter: ['-100%', '-100%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['-70%', '-100%']
    },
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 6,
      borderType: 'solid' // 可选，指定边框类型
    }
  },
  {
    value: 40,
    name: 'Good',
    title: {
      offsetCenter: ['-100%', '-90%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['-70%', '-90%']
    },
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 6,
      borderType: 'solid' // 可选，指定边框类型
    }
  },
  {
    value: 60,
    name: 'Commonly',
    title: {
      offsetCenter: ['-100%', '-80%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['-70%', '-80%']
    },
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 8,
      borderType: 'solid' // 可选，指定边框类型
    }
  },
  {
    value: 60,
    name: 'Commonly',
    title: {
      offsetCenter: ['-100%', '-80%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['-70%', '-80%']
    },
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 8,
      borderType: 'solid' // 可选，指定边框类型
    }
  },
  {
    value: 60,
    name: 'Commonly',
    title: {
      offsetCenter: ['-100%', '-80%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['-70%', '-80%']
    },
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 8,
      borderType: 'solid' // 可选，指定边框类型
    }
  }
];

option = {
  // color: ['#333', 'red', '#999'],
  tooltip: {},
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false
      },
      axisLine: {
        lineStyle: {
          width: 100,
          color: [[1, '#fff']] // 渐变色
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      data: gaugeData,

      detail: {
        width: 50,
        height: 14,
        fontSize: 14,
        color: 'inherit',
        borderColor: 'inherit',
        borderRadius: 20,
        borderWidth: 1,
        formatter: '{value}%'
      },
      title: {
        width: 50,
        height: 14,
        fontSize: 14
      }
    }
  ]
};