Echarts在线免费图表

 
            const datas = [{
   value: 100,
   title: "已办",
   color: "96, 163, 232"
}, {
   value: 44,
   title: "进行中",
   color: "232, 96, 96"
}, {
   value: 60,
   title: "待办",
   color: "228, 229, 230"
}]

const count = datas.reduce((nVal, oVal) => nVal + oVal.value, 0)
const defaultData = {
   value: count,
   itemStyle: {
      color: 'rgba(0,0,0,0)',
   },
}

const setData = (val, color) => {
   return {
      value: val,
      itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
               offset: 0,
               color: `rgba(${color},0.2)`,
            },
            {
               offset: 1,
               color: `rgba(${color},0)`,
            },
         ]),
      },
   }
}
const datasList = [];
const datasList2 = []

datas.map(item => {
   datasList.push(setData(item.value, item.color));
   datasList2.push({
      value: item.value,
      title: item.title,
      itemStyle: {
         color: `rgba(${item.color}, 1)`,
         borderRadius: 20,
      },
   });
})

datasList.push(defaultData)
datasList2.push(defaultData)

option = {
   backgroundColor: '#F7F8FA',
   series: [
      {
         startAngle: 180,
         endAngle: 0,
         name: '内部进度条',
         type: 'gauge',
         radius: '80%',
         splitNumber: 5,
         splitLine: {
            show: false,
            distance: 0,
            length: 40,
            lineStyle: {
               color: 'red', //用颜色渐变函数不起作用
               width: 1,
            },
         },
         axisLine: {
            lineStyle: {
               color: [
                  [datas[0].value / count, `rgba(${datas[0].color}, 1)`],
                  [datas[0].value / count + datas[1].value / count, `rgba(${datas[1].color}, 1)`],
                  [1, `rgba(${datas[2].color}, 1)`]
               ],
               width: 0,
            },
         }, //仪表盘轴线
         axisLabel: {
            show: false,
            color: 'green',
            fontSize: 14,
            fontWeight: 'bold',
            distance: -30,
         }, //刻度标签。
         axisTick: { // 刻度样式
            distance: 0,
            splitNumber: 20,
            length: 2,
            lineStyle: {
               color: 'auto',
               width: 3
            }
         },
         itemStyle: {
            color: 'red',
         },
         // 副标题
         detail: {
            show: true,
            formatter: function (value) {
               if (value !== 0) {
                  var num = Math.round(value);
                  return parseInt(num).toFixed(0);
               } else {
                  return 0;
               }
            },
            offsetCenter: ["0", "-8px"],
            fontSize: 18,
            fontWeight: "700",
            color: "#333333",
         },
         title: {
            show: true,
            offsetCenter: ["0", "-32px"],
            color: "#666666",
            fontSize: 14, //表盘上的标题文字大小
            fontWeight: 400,
         },
         data: [
            {
               value: datas[0].value,
               name: datas[0].title,
            },
         ],
         pointer: {
            show: false,
         },

         animationDuration: 4000,
         z: 9,
      },
      {
         type: 'pie',
         name: '内层细圆环',
         radius: ['65%', '20%'],
         emphasis: {
            scale: false,
         },
         z: 2,
         startAngle: 180,
         endAngle: 0,
         label: {
            show: false,
         },
         data: datasList,
         animation: true,
      },
      {
         type: 'pie',
         name: '内层细圆环',
         radius: ['75%', '70%'],
         emphasis: {
            scale: false,
         },
         z: 2,
         startAngle: 180,
         endAngle: 0,
         // itemStyle: {
         //    color: 'rgba(59,191,253,1)',
         // },
         label: {
            show: false,
         },
         data: datasList2,
         animation: true,
      },

   ],
};

myChart.on("mouseover", {}, (cData) => {
   setEventChartData(cData, cData.data, datas);
});

myChart.on("mouseout", {}, (cData) => {
   setEventChartData(cData, datas[0], datas);
});

/**
 * 仪表盘事件触发设置数据
 * @param {Object}  cData         当前操作的数据
 * @param {Object}  apiData       需要写入的数据
 */
const setEventChartData = (cData, apiData) => {
   console.log(cData)
   if (cData.data.title) {
      console.log("222")
      // const optionData = setGaugeData(option);
      const seriesData = option.series[0];
      const titleData = seriesData.data[0];
      titleData.name = apiData.title;
      titleData.value = apiData.value;

      myChart.setOption(option);
   }
};