Echarts在线免费图表

 
            let shujv = [];
let obj = {};
let data = [
   ['类型1',],
   [40,],
]
let colorList = ['#02C4A94C', '#02c4a9']
data[0].forEach((itme, index) => {
   obj = {
      name: itme,
      value: data[1][index],
      itemStyle: {
         color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1, //从左到右 0-1
            y2: 0,
            colorStops: [{
               offset: 0.3,
               color: colorList[1]
            }, {
               offset: 1,
               color: colorList[0]
            }],
         },
      },
   }
   shujv.push(obj)
})
const colorSet = [
   [0.3, '#3F4F5DCC'],
   [1, '#3F4F5DCC'],
];
this.getColor2 = function (x, y, r) {//圆心颜色变色
   return {
      type: "radial",
      x,
      y,
      r,
      colorStops: [
         { offset: 1, color: colorList[0] },
         { offset: 0, color: "rgba(26, 224, 186, 0)" }
      ]
   }
}
//绘制仪表盘
let option = {
   backgroundColor: "#011d39",
   series: [{
      type: 'gauge',
      radius: '70%',
      center: ['50%', '60%'],
      max: 180,
      min: 0,
      z: 9999,
      startAngle: 180,
      endAngle: 0,
      pointer: {//仪表盘指针
         show: true,
         length: '18%',
         width: 8,
         icon: 'diamond',
         offsetCenter: [0, -245],
         itemStyle: {
            color: colorList[1]
         }
      },
      progress: {//仪表盘进度
         show: true,
         roundCap: false,
         width: 15
      },
      splitNumber: 9,
      detail: {
         formatter: function (value) {
            var num = Math.round(value);
            return '{bule|' + num + '}{bule|%}';
         },
         rich: {
            bule: {
               fontSize:40,
               fontFamily: 'siyaun',
               color: '#fff8ff',
               fontWeight: '800',
            },
         },
         offsetCenter: ['0%', '-20%'],
      },

      data: shujv,
      title: {
         show: false,
      },
      axisLine: {
         show: true,
         roundCap: false,
         lineStyle: {
            color: colorSet,
            width: 15
         },
      },
      axisTick: {//仪表盘刻度
         show: true,
         splitNumber: 10,
         length: 2,
         lineStyle: {
            color: colorList[1],
            width: 1,
            type: 'solid',
         },
         distance: -50,
      },
      splitLine: {//仪表盘分割线
         show: true,
         length: 2,
         distance: -50,
         lineStyle: {
            color: colorList[1],
            width: 1,
            type: 'solid',
         },
      },

      axisLabel: {
         show: false,
      },
   },

   {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [0, 190],
      center: ['50%', '60%'],
      roseType: 'radius',
      silent: true,
      startAngle: 180,
      legendHoverLink: false,
      itemStyle: {
         borderRadius: 0,
      },
      label: {
         show: false,
      },
      emphasis: {
         label: {
            show: false,
         },
      },
      color: [this.getColor2(0.4, 0, 2), '#FFFFFF00'],
      data: [
         { value: 10, name: 'r' },
         { value: 10, name: 'r0' },
      ],
   },
   ],
}