成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Echarts輕松入門，內(nèi)附踩坑秘籍

YacaToy / 2588人閱讀

摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動端做了深度的優(yōu)化。注內(nèi)容摘自官網(wǎng)，原文地址

首先介紹一下我們的主角ECharts 
ECharts，一個(gè)純 Javascript 的圖表庫，可以流暢的運(yùn)行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的 **Canvas** 類庫 ZRender，提供直觀，生動，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動端做了深度的優(yōu)化。

入門開始 Echarts引入方式

1.npm或者cnpm安裝

cnpm install echarts --save

然后在需要的模塊導(dǎo)入

let echarts = require("echarts/lib/echarts");//引入echarts
require("echarts/lib/chart/bar"); //柱狀圖
require("echarts/lib/component/tooltip");// 提示框
require("echarts/lib/component/title");//標(biāo)題組件

2.單文件引入（echarts官網(wǎng)）
使用Echarts 


    
    ECharts
圖表生成如下

注意！?。?/b>

Echarts的目標(biāo)元素要設(shè)置高度

否則會報(bào)錯(cuò)

resize

當(dāng)遇到響應(yīng)式布局高寬不固定時(shí)，肯定會發(fā)生圖表擠壓或者顯示不全的問題

那么我們將使用Echarts提供的resize(調(diào)整大小)方法

首先我們看一下頁面生成以后的Echarts元素

每個(gè)Echarts圖表都提供了唯一ID,我們可以獲取這個(gè)ID從而操縱對應(yīng)的Echarts圖表

let charId = document.getElementById("main").getAttribute("_echarts_instance_");
echarts.getInstanceById(charId).resize();

當(dāng)然如果你能直接獲取Echarts實(shí)例對象，那么就可以直接操作對應(yīng)的圖表啦?。▽?shí)例指的就是接口init()返回的對象，即上述代碼中的“myChart”，非get接口均返回自身self支持鏈?zhǔn)秸{(diào)用）

setTimeout(function (){
    window.onresize = function () {
        myChart.resize();
       }
},200)
echarts的實(shí)例方法非常重要,因?yàn)樵趯?shí)際運(yùn)用中我們的圖表的數(shù)據(jù)不可能是死的，而是動態(tài)變化的,實(shí)例方法為動態(tài)改變數(shù)據(jù)提供了方法。

注:內(nèi)容摘自echarts官網(wǎng)，原文地址:http://echarts.baidu.com/doc/...

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53215.html

相關(guān)文章

  • Echarts輕松入門，內(nèi)附踩坑秘籍

    摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動端做了深度的優(yōu)化。注內(nèi)容摘自官網(wǎng)，原文地址 首先介紹一下我們的主角ECharts ECharts，一個(gè)純 Javascript 的圖表庫，可以流暢的運(yùn)行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的 **Canvas** 類庫 ZRen...

    Tony 評論0 收藏0

  • Echarts輕松入門，內(nèi)附踩坑秘籍

    摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動端做了深度的優(yōu)化。注內(nèi)容摘自官網(wǎng)，原文地址 首先介紹一下我們的主角ECharts ECharts，一個(gè)純 Javascript 的圖表庫，可以流暢的運(yùn)行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的 **Canvas** 類庫 ZRen...

    tainzhi 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<