echarts 饼图

echarts 饼图

饼图加折现加内部画圆

代码

option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: [200,240],
      z:6,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      label:{
        show:true,
        alignTo: 'edge',
        formatter: '{name|{b}}\n{value|{c}}',
        lineHeight: 20,
        rich: {},
        minMargin: 5,
        edgeDistance: 10,
      },
      labelLine: {
        show: true,
        length: 60,
        lineStyle: {
          width: 2,
          color:'black'
        }
      },
      itemStyle: {
          color: 'transparent'
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
    },
    {
      name: 'Access From',
      type: 'pie',
       radius: [200,280],
      z:2,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      labelLine: {
        show: false,
      },
      label:{
        show:false
      },
    },
    {
      z:7,
      name: 'Access From',
      type: 'pie',
      radius: [200,270],
      itemStyle: {
          color: 'transparent'
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      labelLine: {
        show: false,
      },
      label:{
        show:true,
        position: 'inside',
        formatter: '{hr|}',
        rich: {
          hr: {
            backgroundColor: '#fff',
            borderRadius:3,
            width:3,
            height:3,
            padding:[3,3,0,-12]
          },
        }
      },
    }
  ]
};

样式

注

直接放到echarts 官方实例上运行即可