Echarts在线免费图表

 
            option = {
  backgroundColor: '#0a142f',
  title: [
    {
      text: '阴性',
      x: 'center',
      top: '62%', // 大小可改
      textStyle: {
        color: '#BAE7FF',
        fontSize: 51,
      },
    },
    {
      text: '79%',
      x: 'center',
      top: '30%', // 大小可改
      textStyle: {
        fontSize: 60,
        color: '#fff',
      },
    },
  ],
  tooltip: {
    show: false,
    formatter(a) {
      return (a.name + ':' + a.percent.toFixed(0) + '%')
    },
  },
  color: ['#1EE7E7', '#f53f3f'],
  legend: {
    selectedMode: false,
    data: ['阴性', '阳性'],
    textStyle: {
      color: '#BAE7FF',
    },
    bottom: '0',
    itemWidth: 10,
    itemHeight: 10,
    formatter(name) {
      let data = [{ name: '阴性', value: 79 }, { name: '阳性', value: 21 }]
      let value
      data.forEach((item) => {
        if (item.name == name) {
          value = item.value
        }
      })
      return `${name}  ${value}人`
    },
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: '0', // 隐藏大小用于显示图例
      center: ['50%', '40%'],
      data: [{ name: '阴性', value: 79 },
      { name: '阳性', value: 21 },],
      hoverAnimation: false,
      avoidLabelOverlap: false,
      labelLine: {
        show: false,
      },
      label: {
        normal: {
          show: false,
        },
      },
    },
    {
      type: 'gauge',
      radius: '75.1%', // 大小可改
      center: ['50%', '50%'],
      clockwise: true,
      startAngle: 90,
      endAngle: -269.9999,
      pointer: {
        show: false,
      },
      detail: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: [[0, 'red'], [0.79, '#1EE7E7'], [1, 'red']],
          width: 10,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    }, // 中间环形
    {
      type: 'gauge',
      radius: '80%', // 大小可改
      center: ['50%', '50%'],
      clockwise: true,
      startAngle: 90,
      endAngle: -269.9999,
      splitNumber: 200,
      pointer: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#333c3e',
          width: 2,
        },
      },
      axisLabel: {
        show: false,
      },
      detail: {
        show: false,
      },
    }, // 中间环形分割线
    {
      name: '中心饼图',
      type: 'pie',
      radius: '70%', // 大小可改
      center: ['50%', '50%'],
      data: [100],
      hoverAnimation: false,
      avoidLabelOverlap: false,
      labelLine: {
        show: false,
      },
      label: {
        show: false,
      },
      tooltip: {
        formatter: ' ',
      },
      itemStyle: {
        color: '#0a142f',
      },
    },
    {
      name: '内圈',
      type: 'pie',
      startAngle: 80,
      radius: ['68%'], // 大小可改
      hoverAnimation: false,
      center: ['50%', '50%'],
      itemStyle: {
        color: 'rgba(66, 66, 66, .1)',
        borderWidth: 2,
        borderColor: 'rgba(101, 200, 255, 0.13)',
      },
      data: [100],
    },
    {
      name: '外圈',
      type: 'pie',
      startAngle: 80,
      radius: ['84%'], // 大小可改
      hoverAnimation: false,
      center: ['50%', '50%'],
      itemStyle: {
        color: 'rgba(66, 66, 66, .1)',
        borderWidth: 2,
        borderColor: 'rgba(101, 200, 255, 0.13)',
      },
      data: [100],
    },
  ],
};