Echarts在线免费图表

 
            let colors = ['#FFCC00', '#00CBFF', '#FF6600']
let data = [
   {
      name: 'AA',
      value: 100
   },
   {
      name: 'BB',
      value: 100
   }, {
      name: 'CC',
      value: 100
   }
]

data = data.map((item, i) => {
   item.itemStyle = {
      color: {
         type: 'radial',
         x: myChart.getWidth() / 2,
         y: myChart.getHeight() / 2,
         r: 200,
         global: true,
         colorStops: [
            {
               offset: 0, color: hexToRgba(colors[i], 0)
            },
            {
               offset: 0.7, color: hexToRgba(colors[i], 0)
            },
            {
               offset: 0.7, color: hexToRgba(colors[i], 0.4)
            },
            {
               offset: 0.8, color: hexToRgba(colors[i], 0.4)
            },
            {
               offset: 0.8, color: hexToRgba(colors[i], 0.6)
            },
            {
               offset: 0.9, color: hexToRgba(colors[i], 0.6)
            },
            {
               offset: 0.9, color: hexToRgba(colors[i], 0.8)
            },
            {
               offset: 1, color: hexToRgba(colors[i], 0.8)
            }
         ]
      }
   }
   return item
})

option = {
   //你的代码
   backgroundColor: '#021C3D',
   series: [
      {
         type: 'pie',
         radius: 200,
         itemStyle:{
           borderWidth:5,
           borderColor:'#021C3D'
         },
         data
      }
   ]
};


function hexToRgba(hex, opacity) {
   return (
      "rgba(" +
      parseInt("0x" + hex.slice(1, 3)) +
      "," +
      parseInt("0x" + hex.slice(3, 5)) +
      "," +
      parseInt("0x" + hex.slice(5, 7)) +
      "," +
      opacity +
      ")"
   );
}