Echarts在线免费图表

 
            
const data = [{
   name: '苹果',
   value: '24'
},{
   name: '梨子',
   value: '26'
},{
   name: '葡萄',
   value: '38'
},{
   name: '西瓜',
   value: '12'
},]
option = {
   backgroundColor: 'rgba(0, 0, 0, 0.8)',
   //你的代码
   color: [
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#65aaff' },
        { offset: 1, color: 'rgba(101, 170, 255, 0.5)' },
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#1ae6b4' },
        { offset: 1, color: 'rgba(26, 230, 180, 0.5)' },
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#00e4ff' },
        { offset: 1, color: 'rgba(0, 228, 255, 0.5)' },
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#ffcc85' },
        { offset: 1, color: 'rgba(227, 183, 121, 0.5)' },
      ]),
    ],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(3,50,86,0.8)',
      textStyle: {
        fontSize: 16,
        color: '#ffffff',
      },
      formatter: (params) => {
        return params.name + ': ' + params.value + '%'
      },
    },
    legend: {
      //图例形状
      icon: 'circle',
      top: '2%',
      right: '2%',
      show: true,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 30,
      data: data.map((el) => el.name),
      textStyle: {
        fontSize: 14,
        color: '#a6e4ff',
      },
    },
    series: [
      {
        type: 'pie',
        roseType: 'radius',
        radius: ['25%', '60%'],
        center: ['50%', '50%'],
        data: data,
        itemStyle: {
          borderWidth: 2,
        },
        labelLine: {
          length: 0,
        },
        label: {
          formatter: (params) => {
            return '{name|' + params.name + ': }{value|' + params.value + '%}'
          },
          rich: {
            name: {
              fontSize: 14,
              color: '#a6e4ff',
            },
            value: {
              fontSize: 14,
              color: '#fff',
            },
          },
        },
      },
      {
        type: 'pie',
        radius: ['15%', '25%'],
        center: ['50%', '50%'],
        data: data,
        itemStyle: {
          opacity: 0.3,
        },
        label: {
          show: false,
        },
      },
    ],
};