echarts使用總結

最近一段時間作了一個使用echarts的圖表項目。因爲理解API能力有限，使用起來並不是暢通無阻。
所謂好記性不如爛筆頭，現將一些比較關鍵的點記錄一下，供後續查看。

一 使用方法

項目：ionic+angular4+echarts

1.因爲打包緣由，echarts不能直接引入進package.json的dependencies中，只能以原始的方式從index.html中引入

<script src="assets/js/echarts.min.js"></script>

2.在組件的.html文件中

<div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

3.在組件的.ts文件中配置好pieOption的值以及點擊drill down的邏輯jump2Detail

4.ngx-echarts插件 --能夠獲取echarts實例的service

安裝：npm install ngx-echarts
配置：AngularEchartsModule or NgxEchartsModule("ngx-echarts": "^2.1.0")      -- 根據版本不一樣導入模塊 從ngx-echarts.module.d.ts這個文件中看export哪一個模塊

//app.module.ts
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
  imports:[NgxEchartsModule], //
  ...
})
  
//xxx.ts
import { NgxEchartsService } from 'ngx-echarts';
  
export class xxx {
  constructor(
      private echartService:NgxEchartsService
  ){...}
    
  fn(){
      let echartInstance = this.echartsService.getInstanceByDom(xxx); //獲取echarts實例，而後能夠調用內部的方法update一些東西
        ...
  }
}

---

5.圖表寬度自適應 -- resize功能

使用方式：
    i.指令配置 -- 忘了
    ii.手動代碼
    @HostListener('window:resize', ['$event'])
    resize(event) {
        setTimeout(() => {
          //存在多個圖表時，全部均須要自適應的狀況
          let echartDoms = Array.from(document.getElementsByClassName('xxx'));
          echartDoms.forEach(dom => {
            this.echartService.getInstanceByDom(dom).resize();
          })
        }, 100);
    }

6.圖表的事件 -- 普通鼠標事件與圖表自定義的事件都可以經過實例綁定

//'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'
  echartInstance.on('click',params => {
    ...
  });
  
  //datazoom、legendscroll、datarangeselected、...
  echartInstance.on('dataZoom',params => {
    ...
  })
  
  //有些事件在angular中有對應的指令形式
  //chartClick、chartDbClick、chartMouseDown、chartMouseUp、chartMouseOver、chartMouseOut、chartGlobalOut、chartContextMenu、chartDataZoom
  <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

---

二 注意點

1.每一塊渲染區域都有一個position的設置，能夠自定義離上、下、左、右的距離

grid:{
    top:...
    left:...
    bottom:...
    right:...
}

legend:{
    top:...
    left:...
    ...
}

---

2.每個涉及值的顯示點基本都提供了formatter

tooltip:{
        formatter: params => { //自定義hover狀態數據顯示的狀況
            let str = '';
            str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;
                //item中提供了圖標、顏色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //須要根據值去重算數據而後顯示的狀況
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ': ' + Math.round(total).toLocaleString();
        }
    }

---

3.xAxis/yAxis 配置座標軸的一些屬性 刻度、座標軸名稱、如何顯示座標信息等

---

4.toolbox 工具欄，內置有導出圖片、數據視圖、動態類型切換、數據區域縮放、重置5個工具
其中導出圖片能夠本身經過canvas的相關API 將多個圖表一併導出

---

5.dataZoom 數據區域縮放組件 -- 能夠一個也能夠多個

dataZoom:[
    {
        type:'inside', //內置在座標系中 經過鼠標滾輪或者手指touch進行處罰
        ...
    },
    {
        type:'slider', //在外部 顯示爲滑動條形的一個組件，可直接拖動使用
        ...
    }
]

---

6.series 系列列表，每一個系列經過type決定圖表類型 --根據不一樣的圖表注入不一樣格式的數據

series:{
    type:'line'/'pie'/'bar'/'treemap',
    ...
}

---

其實細分到每個圖表都有一些細微的設置，數據以及顏色、間距等，待續...

若是bug請指正Thanks♪(･ω･)ﾉ！