Echarts在线免费图表

 
            let baseData = [
   { value: 1048, name: 'Search Engine' },
   { value: 735, name: 'Direct' },
   { value: 580, name: 'Email' },
   { value: 484, name: 'Union Ads' },
   { value: 300, name: 'Video Ads' }
]
let data1 = [];
let data2 = [];
let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#00ff00'];
let count = 0;
baseData.map((v, k) => {
   count += v.value;
   data1.push({
      ...v,
      itemStyle: {
         color: color[k]
      }
   })
   data2.push({
      ...v,
      itemStyle: {
         color: color[k] + '7F'
      }
   })
})
option = {
   backgroundColor:"#fff",
   title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
   },
   colors:color,
   tooltip: {
      trigger: 'item'
   },
   legend: {
      orient: 'vertical',
      left: 'left'
   },
   series: [
      {
         name: 'Access From',
         type: 'pie',
         radius: ['50%', '40%'],
         data: data1,
         label: {
            show: false
         }
      },
      {
         name: 'Access From',
         type: 'pie',
         radius: ['70%', '50%'],
         data: data2,
         data: [
            ...data2.map((v, k) => {

               let beforeCount = 0;
               for (let i = 0; i < k; i++) {
                  beforeCount += data2[i].value;
               }
               let afterCount = beforeCount+v.value;

               let pi = Math.PI * 2 / count;

               let endAngle = pi * beforeCount;
               let startAngle = pi * afterCount;
               let angle = (endAngle + startAngle) / 2;
               angle = angle * 180 / Math.PI;

               return {
                  ...v,
                  label: {
                     show: true,
                     position: 'inside',
                     color: "#000",
                     rotate:-angle
                  }
               }
            })
         ],
         emphasis: {
            disabled: true
         }
      }
   ]
};