產(chǎn)品的需求

產(chǎn)品的需求是達(dá)到這樣的效果：

image

該圖標(biāo)采用的是eCharts，但是eCharts中沒有這樣的demo顯示，需要做對應(yīng)的修改與調(diào)整；具體實(shí)現(xiàn)代碼：

/**
       * 初始化圖表
       * */
      initEcharts(){
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        var myChart = echarts.init(document.getElementById('echarts-main'));

        // 指定圖表的配置項(xiàng)和數(shù)據(jù)
        var option = {
          color:['#4547b6','#4dbeff', '#51f1f1', '#1ae7b0', '#f7da36','#f9a137',  '#dd4544', '#bda29a','#6e7074', '#546570', '#c4ccd3'], // 每一個(gè)餅狀圖的顏色
          series: [
            {
              name:'訪問來源',
              type:'pie',
              radius : '50%',
              center: ['50%', '70%'],
              data: this.storeGradeRankDataList, // 展示的數(shù)據(jù)源
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal:{
                  label:{
                    show: true,
                    formatter: ' : {c}' // 展示具體數(shù)值，b：展示數(shù)據(jù)的名稱； c：展示數(shù)據(jù)的值
                  },
                  labelLine :{show:true} // 是否顯示線
                }
              }
            }
          ],
        };

        // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
        myChart.setOption(option);
      },