安全评分-仪表盘echarts 饼配置项内容和展示

多个图例组合形成的复杂仪表盘

      let score = 70,
  maxScore = 100,
  scoresPercentage = score / maxScore;

option = {
  title: {
    text: '安全评分',
    // score为0时不显示，这里转成字符串
    subtext: '' + score,
    x: 'center',
    y: 'center',
    textStyle: {
      color: '#5c5c5c',
      fontSize: 12,
      lineHeight: 25,
    },
    subtextStyle: {
      color: '#DE1B1B',
      fontSize: 40,
      lineHeight: 30,
    },
  },
  animationDuration: 1000,
  series: [
    // 低圈--外环
    {
      type: 'pie',
      zlevel: 1,
      radius: ['76%', '100%'],
      silent: true,
      startAngle: 225,
      endAngle: 45,
      label: {
        show: true,
      },
      labelLine: {
        show: false,
      },
      animation: false,
      data: [
        {
          value: 75,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#ebeff5',
                },
                {
                  offset: 1,
                  color: '#fff',
                },
              ],
            },
          },
        },
        {
          value: 25,
          itemStyle: {
            opacity: 0,
          },
        },
      ],
    },

    // 低圈--内环
    {
      type: 'pie',
      radius: ['52%', '76%'],
      zlevel: 1,
      silent: true,
      startAngle: 225,
      endAngle: 45,
      label: {
        show: true,
      },
      labelLine: {
        show: false,
      },
      animation: false,
      data: [
        {
          value: 75,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#f5f7fa',
                },
                {
                  offset: 1,
                  color: '#fff',
                },
              ],
            },
          },
        },
        {
          value: 25,
          itemStyle: {
            opacity: 0,
          },
        },
      ],
    },

    // 外环上的虚线
    {
      name: '',
      zlevel: 5,
      silent: true,
      type: 'gauge',
      center: ['50%', '50%'],
      radius: '89%',
      startAngle: 220,
      endAngle: -45,
      splitNumber: 5,
      axisLine: {
        show: false,
        lineStyle: {
          width: 1,
          color: [[1, 'rgba(0,0,0,0)']],
        },
      },
      splitLine: {
        show: true,
        length: 2,
        lineStyle: {
          width: 4,
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: true,
        splitNumber: 10,
        length: 2,
        lineStyle: {
          width: 2,
          color: '#a3a3a3',
        },
      },
      detail: {
        show: false,
      },
      title: {
        show: false,
      },
    },

    // 内环上的数字显示
    {
      name: '',
      type: 'gauge',
      center: ['50%', '50%'],
      radius: '75%',
      silent: true,
      zlevel: 5,
      startAngle: 225, //刻度起始
      endAngle: -45, //刻度结束
      min: 0,
      max: 100,
      splitNumber: 4,
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        length: 0,
      },
      axisLabel: {
        color: '#a3a3a3',
        distance: 0,
        fontFamily: 'DINPro-Regular',
        fontSize: 12,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          opacity: 0,
        },
      },
      detail: {
        show: false,
      },
    },

    // 仪表盘值得渐变
    {
      type: 'pie',
      zlevel: 10,
      radius: ['87%', '91%'],
      silent: true,
      startAngle: 225,
      endAngle: 45,
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          name: '',
          value: scoresPercentage,
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              type: 'linear',
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: '#FA8C17',
                },
                {
                  offset: 1,
                  color: '#DE1B1B',
                },
              ],
            },
          },
        },
        {
          value: 1.325 - scoresPercentage,
          itemStyle: {
            opacity: 0,
            color: 'rgba(255, 255, 255, 0)',
          },
        },
      ],
    },

    // 值得尾巴，那个圆圈
    {
      type: 'pie',
      radius: ['87%', '88%'],
      zlevel: 10,
      silent: true,
      startAngle: 225,
      endAngle: 45,
      data: [
        {
          name: '',
          value: scoresPercentage,
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          itemStyle: {
            color: 'rgba(0,0,0,0)',
          },
        },

        // 画中间的图标
        {
          name: '',
          value: 0,
          label: {
            position: 'inside',
            backgroundColor: '#fff',
            borderRadius: 12,
            padding: 8, // 可以控制圆的大小
            borderWidth: 3,
            borderColor: '#DE1B1B',
          },
        },
        {
          name: '',
          value: 1.325 - scoresPercentage,
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          itemStyle: {
            color: 'rgba(255,255,255,0)',
          },
        },
      ],
    },
  ],
};