国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

echarts使用總結(jié)

spademan / 526人閱讀

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

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

一 使用方法

項目：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")      -- 根據(jù)版本不同導(dǎo)入模塊 從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實例，然后可以調(diào)用內(nèi)部的方法update一些東西
        ...
  }
}

5.圖表寬度自適應(yīng) -- resize功能

使用方式：
    i.指令配置 -- 忘了
    ii.手動代碼
    @HostListener("window:resize", ["$event"])
    resize(event) {
        setTimeout(() => {
          //存在多個圖表時，所有均需要自適應(yīng)的情況
          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中有對應(yīng)的指令形式
  //chartClick、chartDbClick、chartMouseDown、chartMouseUp、chartMouseOver、chartMouseOut、chartGlobalOut、chartContextMenu、chartDataZoom
二 注意點

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

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

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

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

tooltip:{
        formatter: params => { //自定義hover狀態(tài)數(shù)據(jù)顯示的情況
            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) => { //需要根據(jù)值去重算數(shù)據(jù)然后顯示的情況
            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 工具欄，內(nèi)置有導(dǎo)出圖片、數(shù)據(jù)視圖、動態(tài)類型切換、數(shù)據(jù)區(qū)域縮放、重置5個工具
其中導(dǎo)出圖片可以自己通過canvas的相關(guān)API 將多個圖表一并導(dǎo)出

5.dataZoom 數(shù)據(jù)區(qū)域縮放組件 -- 可以一個也可以多個

dataZoom:[
    {
        type:"inside", //內(nèi)置在坐標系中 通過鼠標滾輪或者手指touch進行處罰
        ...
    },
    {
        type:"slider", //在外部 顯示為滑動條形的一個組件，可直接拖動使用
        ...
    }
]

6.series 系列列表，每個系列通過type決定圖表類型 --根據(jù)不同的圖表注入不同格式的數(shù)據(jù)

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

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

如果bug請指正Thanks?(?ω?)?！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97641.html

相關(guān)文章

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

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

    mmy123456 評論0 收藏0

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

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

    hedge_hog 評論0 收藏0

  • vue中引入echarts渲染問題

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

    leiyi 評論0 收藏0

  • echarts 與 highcharts

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

    王笑朝 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<