Echarts在线免费图表

 
            let dataArr = 40
let pieNum = (dataArr * 75) / 100
let max = 100
var colorSet = {
   color: 'rgba(59,191,253,1)',
}

option = {
   backgroundColor: '#1b2735',
   series: [
      {
         name: '内部进度条',
         type: 'gauge',
         radius: '80%',
         splitNumber: 5,
         splitLine: {
            show: true,
            distance: 0,
            length: 4,
            lineStyle: {
               color: '#ddd', //用颜色渐变函数不起作用
               width: 1,
            },
         },
         axisLine: {
            lineStyle: {
               color: [
                  [dataArr / 100, colorSet.color],
                  [1, colorSet.color],
               ],
               width: 2,
            },
         }, //仪表盘轴线
         axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 14,
            fontWeight: 'bold',
            distance: -30,
         }, //刻度标签。
         axisTick: {
            show: false,
         },
         itemStyle: {
            color: '#ffffff',
         },
         detail: {
            show: true,
            formatter: function (value) {
               if (value !== 0) {
                  var num = Math.round(value)
                  return parseInt(num).toFixed(0) + '%'
               } else {
                  return 0
               }
            },
            offsetCenter: ['0', '90%'],

            fontSize: 16,
            fontWeight: '700',
            color: '#ffffff',
         },
         title: {
            show: true,
            offsetCenter: ['0', '60%'],

            color: '#fff',
            fontSize: 12, //表盘上的标题文字大小
            fontWeight: 400,
         },
         data: [
            {
               value: dataArr,
               name: this.title,
            },
         ],
         pointer: {
            show: true,
            length: '70%',
            radius: '20%',
            width: 3, //指针粗细
         },

         animationDuration: 4000,
         z: 9,
      },
      {
         type: 'pie',
         name: '内层细圆环',
         radius: ['20%', '58%'],
         emphasis: {
            scale: false,
         },
         z: 2,

         startAngle: 225,
         itemStyle: {
            color: [
               [
                  dataArr / 100,
                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                     {
                        offset: 0,
                        color: 'rgba(59,191,253,0.1)',
                     },
                     {
                        offset: 0.5,
                        color: 'rgba(59,191,253,0.4)',
                     },
                     {
                        offset: 1,
                        color: 'rgba(59,191,253,0.6)',
                     },
                  ]),
               ],
            ],
         },
         label: {
            show: false,
         },
         data: [
            {
               value: pieNum,
               itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                     {
                        offset: 0,
                        color: 'rgba(59,191,253,0.1)',
                     },
                     {
                        offset: 0.5,
                        color: 'rgba(59,191,253,0.4)',
                     },
                     {
                        offset: 1,
                        color: 'rgba(59,191,253,0.6)',
                     },
                  ]),
               },
            },
            {
               value: 100 - pieNum,
               itemStyle: {
                  color: 'rgba(255,255,255,0)',
               },
            },
         ],
         animation: true,
      },
      {
         type: 'pie',
         name: '内层细圆环',
         radius: ['62%', '70%'],
         emphasis: {
            scale: false,
         },
         z: 2,
         startAngle: 225,
         itemStyle: {
            color: 'rgba(59,191,253,1)',
         },
         label: {
            show: false,
         },
         data: [
            {
               value: pieNum,
               itemStyle: {
                  color: 'rgba(59,191,253,1)',
               },
            },
            {
               value: 100 - pieNum,
               itemStyle: {
                  color: 'rgba(255,255,255,0)',
               },
            },
         ],
         animation: true,
      },

      {
         name: '内部小环',
         type: 'gauge',
         radius: '13%',
         axisLine: {
            lineStyle: {
               color: [[1, colorSet.color]],
               width: 1,
            },
         },
         axisLabel: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
         itemStyle: {
            color: '#ffffff',
         },
         detail: {
            show: false,
         },
         title: {
            show: false,
         },
         pointer: {
            show: false,
         },
      },
      {
         //指针上的圆
         type: 'pie',
         tooltip: {
            show: false,
         },
         emphasis: {
            scale: false,
         },
         legendHoverLink: false,
         radius: ['0%', '6%'],
         center: ['50%', '50%'],
         label: {
            show: false,
         },
         labelLine: {
            show: false,
         },
         data: [
            {
               value: 120,
               itemStyle: {
                  color: '#ffffff',
               },
            },
         ],
         z: 1,
      },
   ],
};