Echarts在线免费图表

 
                const demoData = [{
      name: '风险等级高',
      value: 204,
      unit: '件'
    }];
    option = {
      backgroundColor: '#03101b',
      series: (function () {
        var result = [];

        demoData.forEach(function (item) {
          result.push(
            {
              type: 'pie',
              name:'内部黑色圆底',
              opacity: 1,
              radius: ['0', '28%'],
              center: ['50%', '50%'],
              hoverAnimation: false,
              itemStyle:{
                shadowColor:'#661a1d',
                shadowBlur:20
              },
              z: 5,
              data: [
                {
                  value: demoData[0].value,
                  unit: demoData[0].unit,
                  itemStyle: {
                    normal: {
                      color: 'black',
                      opacity: 1,
                    },
                  },
                  label: {
                    show: true,
                    position: 'center',
                    color: 'white',
                    formatter: [`{a|${demoData[0].value}}`, `{b|${demoData[0].unit}}`].join('\n'),
                    rich: {
                      a: {
                        fontSize: 50,
                        color: '#FF5454'
                      },
                      b: {
                        fontSize: 20
                      }
                    }

                  },
                },
              ],
              labelLine: {
                show: false,
              },
            },
            {
              type: 'gauge',
              name:'核心仪表盘',
              radius: '70%',
              z: 1,
              splitNumber: 9,
              min: 0,
              max: 450,
              axisLine: {
                show: true,
                lineStyle: {
                  color: [[1, '#FFDFD4']],
                  width: 1,
                  shadowColor: 'rgba(124, 46, 62)',
                  shadowBlur: 10
                },
              },
              axisLabel: {
                distance: 3,
                textStyle: {
                  color: '#fff',
                  fontSize: '14',
                  fontWeight: 20
                }
              },
              splitLine: {
                show: true,
                length: 16,
                lineStyle: {
                  color: "#FFDFD4",
                  width: 0.5
                }
              },
              pointer: {
                z: -1,
                show: true,
                width: 2,
                length: '100%'
              },
              itemStyle: {
                color: 'white'
              },
              progress: {
                z: -1,
                show: true,
                width: 60,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 1, 0, [{
                      offset: 0,
                      color: 'rgba(168, 33, 31,0)',
                    }, {
                      offset: 0.7,
                      color: 'rgba(168, 33, 31,0.5)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(168, 33, 31,0.9)',
                    }
                  ]
                  )
                }
              },
              detail: {
                show: false
              },

              title: {//默认为name
                show: true,
                fontSize: 25,
                color: 'white',
                offsetCenter: [0, '70%']
              },
              data: demoData
            },
          );
        });

        return result;
      })()
    };