Echarts輕松入門，內附踩坑秘籍

YacaToy 發布于2019-08-02 11:55 / 2579人閱讀

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

首先介紹一下我們的主角ECharts

ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 **Canvas** 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。

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

入門開始 Echarts引入方式

1.npm或者cnpm安裝

cnpm install echarts --save

然后在需要的模塊導入

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

2.單文件引入（echarts官網）

使用Echarts



    
    ECharts

圖表生成如下

注意！！！

Echarts的目標元素要設置高度

否則會報錯

resize

當遇到響應式布局高寬不固定時，肯定會發生圖表擠壓或者顯示不全的問題

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

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

每個Echarts圖表都提供了唯一ID,我們可以獲取這個ID從而操縱對應的Echarts圖表

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

當然如果你能直接獲取Echarts實例對象，那么就可以直接操作對應的圖表啦！（實例指的就是接口init()返回的對象，即上述代碼中的“myChart”，非get接口均返回自身self支持鏈式調用）

setTimeout(function (){
    window.onresize = function () {
        myChart.resize();
       }
},200)

echarts的實例方法非常重要,因為在實際運用中我們的圖表的數據不可能是死的，而是動態變化的,實例方法為動態改變數據提供了方法。

注:內容摘自echarts官網，原文地址:http://echarts.baidu.com/doc/...

GPU云服務器云服務器 php輕松入門跟老齊學python輕松入門內附面試秘籍

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

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

Echarts輕松入門，內附踩坑秘籍

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

Tony 2019-08-29 17:10 評論0 收藏0
Echarts輕松入門，內附踩坑秘籍

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

tainzhi 2019-08-23 12:49 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

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

sutaking 2019-08-02 15:17 評論0 收藏0