echarts饼状图中显示分支

产品的需求

产品的需求是达到这样的效果：

image

该图标采用的是eCharts，但是eCharts中没有这样的demo显示，需要做对应的修改与调整；具体实现代码：

/**
       * 初始化图表
       * */
      initEcharts(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts-main'));

        // 指定图表的配置项和数据
        var option = {
          color:['#4547b6','#4dbeff', '#51f1f1', '#1ae7b0', '#f7da36','#f9a137',  '#dd4544', '#bda29a','#6e7074', '#546570', '#c4ccd3'], // 每一个饼状图的颜色
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius : '50%',
              center: ['50%', '70%'],
              data: this.storeGradeRankDataList, // 展示的数据源
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal:{
                  label:{
                    show: true,
                    formatter: '{b} : {c}' // 展示具体数值，b：展示数据的名称； c：展示数据的值
                  },
                  labelLine :{show:true} // 是否显示线
                }
              }
            }
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },