Echarts餅圖之?dāng)?shù)據(jù)展示

1、組件簡(jiǎn)介

ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

官網(wǎng)鏈接：Echarts官網(wǎng)

W3C教程：W3C–Echarts教程

2、前端代碼實(shí)現(xiàn)

首先，下載庫(kù)，并引入到項(xiàng)目文件；

話不多說(shuō)，直接上代碼。

/* 封裝的組件 HTML代碼

<div class="echart-wrap-box">

   <div class="echart-content"></div>

</div>

*/

let echarts = require("echarts/echarts.min");

defaults: {

  option: {

      echartsObj: {},

      tooltip: {//提示框浮層內(nèi)容。

          trigger: 'item',//數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類目軸的圖表中使用。

          formatter: "{b} : {c}萬(wàn)人"http://提示框浮層內(nèi)容格式器,{a}（系列名稱），{b}（數(shù)據(jù)項(xiàng)名稱），{c}（數(shù)值）, 3r5l5bh（百分比）

      },

      //如果系列沒(méi)有設(shè)置顏色，則會(huì)依次循環(huán)從默認(rèn)列表中取顏色作為系列顏色。

      color: ["#369DFD", "#32C8CA", "#49C872", "#F6CE36", "#EE607A", "#935CE3", "#3436C7", "#3E4D86"],

      legend: {//圖例組件。

          orient: 'vertical',//圖例列表的布局朝向:垂直的

          x: '80%',//圖例組件離容器左側(cè)的距離。

          y: '60%',//圖例組件離容器上側(cè)的距離。

          // width: 100,

          textStyle: {},//圖例文字的樣式

          // left: 'right',//圖例組件離容器左側(cè)的距離。

          top: 'center',//圖例組件離容器上側(cè)的距離。

          data: [],//右側(cè)圖例小組件信息數(shù)據(jù)

      },

      series: [{//餅圖信息

          name: '',

          type: 'pie',//餅狀圖

          radius: 140,//餅圖的半徑。

          center: ['50%', '50%'],

          minAngle: 5,  //最小的扇區(qū)角度（0 ~ 360），用于防止某個(gè)值過(guò)小導(dǎo)致扇區(qū)太小影響交互

          label: {//展示文本設(shè)置

              normal: {

                  show: true,

                  formatter: "{b} : {c}萬(wàn)人",//視覺(jué)引導(dǎo)線內(nèi)容格式器,{a}（系列名稱），{b}（數(shù)據(jù)項(xiàng)名稱），{c}（數(shù)值）, 3r5l5bh（百分比）

              },

              emphasis: {    //文本樣式

                  show: true,    //展示

                  textStyle: {    //文本樣式

                      fontSize: '16',

                      fontWeight: '600',

                  }

              }

          },

          labelLine: {//視覺(jué)引導(dǎo)線設(shè)置

              normal: {

                  show: true

              }

          },

          data: [],//餅狀圖信息數(shù)據(jù),value(數(shù)量)和 name為默認(rèn)數(shù)據(jù)；

          itemStyle: {

              emphasis: {

                  shadowBlur: 10,

                  shadowOffsetX: 0,

                  shadowColor: 'rgba(0, 0, 0, 0.5)'

              }

          }

      }],

  },

  onInit(event) {

      vm = event.vmodel;            

      let data;//假設(shè)這里通過(guò)ajax獲取到了需要展示的數(shù)據(jù)；

      if (data.length == 0) {

          return

      }

      data = data.sort((a, b) => { return b.number - a.number });//數(shù)據(jù)根據(jù)數(shù)量number從大到小排序

      if (data.length > 7) {//從大到小的第八個(gè)新增粉絲數(shù)量的年份 開(kāi)始統(tǒng)一歸為 其他年份新增粉絲數(shù)量

          let arr = data.slice(7);

          let num = 0, rate = 0;

          for (let i = 0; i < arr.length; i++) {//第七個(gè)之后累數(shù)量和比率

              num += Number(arr[i].number);

              rate += Number(arr[i].rate);

          };

          let objOtherYear = {

              value: num,

              name: '其他年份__nana新增粉絲數(shù)量',

              rate: rate

          };

          let arr2 = data.slice(0, 7);

          arr2.push(objOtherYear);

          data = arr2;

          data = data.sort((a, b) => { return b.number - a.number });//數(shù)據(jù)根據(jù)數(shù)量number從大到小排序

      }

      this.option.series[0].data = [];

      this.option.legend.data = [];

      for (let i = 0; i < data.length; i++) {

          let seriesData = {

              value: 0,

              name: '',

              rate: ''

          };

          seriesData.value = data[i].number;

          seriesData.name = data[i].year;

          seriesData.rate = data[i].rate;

          this.option.series[0].data.push(seriesData);//給餅圖賦值數(shù)據(jù)

          let legendData = {

              name: '',

              icon: 'circle',//強(qiáng)制設(shè)置圖形為:圓形

              textStyle: {

                  color: '#000'

              }

          }

          legendData.name = data[i].year;

          this.option.legend.data.push(legendData);//給圖例組件賦值數(shù)據(jù)

      }

  },

  callFun: avalon.noop,//點(diǎn)擊餅狀圖后的回調(diào)

  isClickEchartsOUt: avalon.noop,//是否為餅圖外的點(diǎn)擊，父組件進(jìn)行判斷后傳過(guò)來(lái)

  onReady(event) {

      this.echartsObj = echarts.init(event.target.children[0]);//初始化

      this.echartsObj.setOption(this.option);

      $(window).resize(() => {

          this.echartsObj.resize();

      });

      let dataIndex;//保存選中扇區(qū)的序號(hào)

      let _this = this;

      this.$watch('isClickEchartsOUt', () => {

          if (this.isClickEchartsOUt) {//如果不是餅狀圖扇區(qū)的點(diǎn)擊，則取消選中；

              _this.echartsObj.dispatchAction({

                  type: 'pieUnSelect',//取消選中指定的餅圖扇形。

                  // 可選，系列 index，可以是一個(gè)數(shù)組指定多個(gè)系列

                  seriesIndex: 0,

                  // 可選，數(shù)據(jù)的 index

                  dataIndex: dataIndex,

              })

          }

      });

      // 處理點(diǎn)擊餅圖內(nèi)部的事件

      this.echartsObj.on('click', function (params) {

          if (params.dataIndex != dataIndex) {//如果不是前一次選中的扇區(qū)，則取消選中

              _this.echartsObj.dispatchAction({

                  type: 'pieUnSelect',//取消選中指定的餅圖扇形。

                  // 可選，系列 index，可以是一個(gè)數(shù)組指定多個(gè)系列

                  seriesIndex: 0,

                  // 可選，數(shù)據(jù)的 index

                  dataIndex: dataIndex,

              })

          }

          dataIndex = params.dataIndex;

          _this.echartsObj.dispatchAction({

              type: 'pieSelect',//選中指定的餅圖扇形。

              // 可選，系列 index，可以是一個(gè)數(shù)組指定多個(gè)系列

              seriesIndex: 0,

              // 數(shù)據(jù)的 index，如果不指定也可以通過(guò) name 屬性根據(jù)名稱指定數(shù)據(jù)

              dataIndex: dataIndex,

          })

          vm.callFun(params);//回調(diào)，傳點(diǎn)擊獲取到的數(shù)據(jù)給父組件

      });

  },

  onDispose() {}

}