Echarts在线免费图表

 
            const color_1 = [
   '#5470c6',
   '#91cc75',
   '#fac858',
   '#ee6666',
   '#73c0de'
]
const color_2= [
   '#73c0de',
   '#5470c6',
   '#91cc75',
   '#fac858',
   '#ee6666',
]
const data_1 = [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
      const data_2 = [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
      data_1.forEach((item,index)=>{
         item.itemStyle = {
            color:color_1[index],
         }
      })
      data_2.forEach((item,index)=>{
         item.itemStyle = {
            color:color_2[index],
            borderColor:color_2[index],
         }
      })
option = {
  series: [
      {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false, // 防止标签重叠
      hoverAnimation: false,
      itemStyle: {
         borderWidth:0,
         borderColor: "#fff"
            //   borderRadius: [0, '50%', 0, '50%']
            },
      label: {
        show: false,
        position: 'center' // 标签位置
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data_1,
      z:0
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      hoverAnimation: false,
      itemStyle: {
              borderRadius: [0, '50%', 0, '50%']
            },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data_2
    }
  ]
};