echarts使用總結

spademan 發布于2019-08-23 11:54 / 530人閱讀

摘要：最近一段時間做了一個使用的圖表項目。由于理解能力有限，使用起來并非暢通無阻。所謂好記性不如爛筆頭，現將一些比較關鍵的點記錄一下，供后續查看。

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

一使用方法

項目：ionic+angular4+echarts

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

2.在組件的.html文件中

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

二注意點

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

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

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

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

tooltip:{
        formatter: params => { //自定義hover狀態數據顯示的情況
            let str = "";
            str += `${params[0].name}`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}
`;
                //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?(?ω?)?！

云服務器 GPU云服務器使用方法總結 echart Echarts echarts 圖表

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97641.html

Echarts4.0 使用系列——折線圖，這里可能有你需要的

摘要：常用的類型為，需要定義對呀的類目數據，這個例子中的類目數據為日期組成的數據。在使用之前覺得這個插件內容很多，但是去看了一遍折線圖的后發現有很多都是類似的，例如軸與軸的設置。前言：項目中經常會使用到Echarts,有的需求差不多復用性高，由于之前沒有好好總結，時間一長就容易忘，所以這里總結一下Echarts折線圖使用，下面會列舉官網一些Api。一、效果圖 showImg(https:...

mmy123456 2019-08-30 14:10 評論0 收藏0
Echarts4.0 使用系列——折線圖，這里可能有你需要的

摘要：常用的類型為，需要定義對呀的類目數據，這個例子中的類目數據為日期組成的數據。在使用之前覺得這個插件內容很多，但是去看了一遍折線圖的后發現有很多都是類似的，例如軸與軸的設置。前言：項目中經常會使用到Echarts,有的需求差不多復用性高，由于之前沒有好好總結，時間一長就容易忘，所以這里總結一下Echarts折線圖使用，下面會列舉官網一些Api。一、效果圖 showImg(https:...

hedge_hog 2019-08-22 15:29 評論0 收藏0
vue中引入echarts渲染問題

摘要：在修改數據之后立即使用這個方法，獲得更新后的如果不使用在切換的時候從無到有，該節點還沒加載，不能獲取，會報錯 1.通過以下命令安裝echarts npm install echarts --save 2.在main.js文件里全局引入echarts import echarts from echartsVue.prototype.$echarts = echarts 3.單頁面引用ec...

leiyi 2019-08-02 15:19 評論0 收藏0
echarts 與 highcharts

摘要：渲染能力采用渲染除了對使用，一般來說，更適合繪制圖形元素數量非常大這一般是由數據量大導致的圖表如熱力圖地理坐標系或平行坐標系上的大規模線圖或散點圖等，也利于實現某些視覺特效如交通圖。一．簡介 echartsecharts是百度公司前端開發的一個圖表庫，2013年發布第一版，主要采用canvas畫圖，目前版本3.8.4；完全免費； highcharthighcharts是國外的一家公司...

王笑朝 2019-08-22 17:35 評論0 收藏0