echart全家桶
echart是基於cavans的圖表繪制最為強大的H5組件，其在微信小程序中也有很好的支持，全面的使用 已經有很多介紹文章，本人就不拾人牙慧了，這里補充一些在其他文章中沒有出現，但是在使用過程中可能會遇到的一些問題解決方法。
引用方法
- 復制echart相關文件到小程序的根目錄，最好單獨建立一個目錄來存儲
微信小程序echart組件包文件清單
- 修改小程序的配置文件，聲明對echart組件的依賴，例如要在home頁使用echart組件，則應該在home頁的配置文件index.json中加入如下代碼：
{
"navigationBarTitleText": "聽診器",
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}- js中導入echart組件，即在使用echart的頁的主js程序import echart組件
import * as echarts from '../../ec-canvas/echarts.min'修改圖表視圖寬度、高度
微信小程序定義了<ec-canvas></ec-canvas>標簽來使用echart組件，但是圖表視圖在頁面中顯示的寬度和高度並不能如一般的標簽一樣通過class來進行設置，而是在echart組件目錄中的ec-cavans.wxss中，這個在實際使用中一定要注意。
.ec-canvas {
width: 100%;
height: 600rpx;
}定制合適的echart組件包
echart包含了很多的組件，而且每種組件是可以按照實際需要自定義組合的，這樣也能夠有效的減少組件包的大小，進入echart官網，選擇項目需要的組件，在線生成echart包，把生成的包復制到上面的echart組件目錄中替換缺省的echart.js
https://echarts.apache.org/zh/builder.html動態更新數據使echart以 動圖的方式實時顯示數據
echart最常用的場景是顯示靜態數據，然而還有一些場景需要實時更新數據並以可視化的方式顯示出來，echart同樣很好的支持了這個需要。只需要更新echart的核心option中的series.data，然后調用echart的setOption函數即可。
//echart畫圖
if(pointNumber>100){
option.series[0].data = lineData
chart.setOption(option)
pointNumber=0
}備注：其中lineData是一個要顯示的數據的數組
動態數據顯示效果
echart在微信小程序中的應用
echart全家桶
echart是基於cavans的圖表繪制最為強大的H5組件，其在微信小程序中也有很好的支持，全面的使用 已經有很多介紹文章，本人就不拾人牙慧了，這里補充一些在其他文章中沒有出現，但是在使用過程中可能會遇到的一些問題解決方法。
引用方法
- 復制echart相關文件到小程序的根目錄，最好單獨建立一個目錄來存儲
微信小程序echart組件包文件清單
- 修改小程序的配置文件，聲明對echart組件的依賴，例如要在home頁使用echart組件，則應該在home頁的配置文件index.json中加入如下代碼：
{
"navigationBarTitleText": "聽診器",
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}- js中導入echart組件，即在使用echart的頁的主js程序import echart組件
import * as echarts from '../../ec-canvas/echarts.min'修改圖表視圖寬度、高度
微信小程序定義了<ec-canvas></ec-canvas>標簽來使用echart組件，但是圖表視圖在頁面中顯示的寬度和高度並不能如一般的標簽一樣通過class來進行設置，而是在echart組件目錄中的ec-cavans.wxss中，這個在實際使用中一定要注意。
.ec-canvas {
width: 100%;
height: 600rpx;
}定制合適的echart組件包
echart包含了很多的組件，而且每種組件是可以按照實際需要自定義組合的，這樣也能夠有效的減少組件包的大小，進入echart官網，選擇項目需要的組件，在線生成echart包，把生成的包復制到上面的echart組件目錄中替換缺省的echart.js
https://echarts.apache.org/zh/builder.html動態更新數據使echart以 動圖的方式實時顯示數據
echart最常用的場景是顯示靜態數據，然而還有一些場景需要實時更新數據並以可視化的方式顯示出來，echart同樣很好的支持了這個需要。只需要更新echart的核心option中的series.data，然后調用echart的setOption函數即可。
//echart畫圖
if(pointNumber>100){
option.series[0].data = lineData
chart.setOption(option)
pointNumber=0
}備注：其中lineData是一個要顯示的數據的數組