后端開發(fā)入坑全棧之 微信小程序 + Echarts圖表
上需求，如下：
一、Echarts介紹
Apache Echarts是一個基于JavaScript的開源可視化圖表庫，用于創(chuàng)建各種類型圖表，常用圖表類型有柱狀圖、折線圖、餅狀圖、散點圖等等。廢話不多說，直接上干貨！耶?
二、微信小程序中使用 Echarts
1、下載Echart-for-weixin項目
echart-for-weixin 項目提供了一個小程序組件（ec-canvas），用這種方式可以方便地使用Echarts
解壓下載下來的項目文件去小程序中打開效果如下：
2、小程序項目中引入echarts
將Echart-for-weixin項目的 ec-cancas組件 復(fù)制到你的小程序開發(fā)項目目錄下，既然是組件，那我就放到pages外了，養(yǎng)成好習(xí)慣~
3、根據(jù)項目需求在線定制圖表
考慮到小程序后期上線會對文件大小有限制，建議到官網(wǎng)進(jìn)行 在線定制圖形 按需下載相應(yīng)的echarts圖表、坐標(biāo)系和組件
將下載好生成的圖表定制文件echarts.min.js重命名為echarts.js并替換掉項目組件ec-cancas中的echarts.js，啟動項目…
??？報錯了。。。刷新、編譯都沒用？別慌，我們來看看提示說 ec-canvas/ec-canvas.js 已被代碼依賴分析忽略，無法被其他模塊引用？
有3種解決方案：
- project.config.json 中 settings 選項添加
"ignoreDevUnusedFiles": false, "ignoreUploadUnusedFiles": false - 詳情 -> 本地設(shè)置 -> 上傳時過濾無依賴文件 勾選去掉 即可
- 清緩存！?。。ê眉一?，一步到位，以上兩種都是關(guān)閉過濾無依賴文件，以后遇到奇奇怪怪的報錯問題都知道先怎么做了叭？直接給我清緩存，如果沒用再去百度??）
4、在頁面中使用Echarts圖表
- (1) 在頁面json文件中引入ec-canvas組件
pages/test/test.json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
- (2) 在頁面wxml文件中使用ec-canvas組件（圖表組件標(biāo)簽內(nèi)添加 force-use-old-canvas=“true” 避免上下滑動頁面圖表出現(xiàn)漂移）
pages/test/test.wxml
<view style="display: flex;">
<button class="{{isSel == 1 ? 'selColor': ''}}" bindtap="selectTap" data-sel="1">日</button>
<button class="{{isSel == 2 ? 'selColor': ''}}" bindtap="selectTap" data-sel="2">周</button>
<button class="{{isSel == 3 ? 'selColor': ''}}" bindtap="selectTap" data-sel="3">月</button>
</view>
<!-- 使用ec-canvas組件 -->
<view class="main">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
</view>
- (3) 在頁面wxss文件中給ec-canvas圖表組件設(shè)置高度（使用圖表的容器必須給定高度?。。。?br>pages/test/test.wxss
.main {
height: 400rpx;
}
ec-canvas {
width: 100%;
height: 100%;
}
.selColor {
background: #3FD0AA;
color: #ffffff;
}
- (4) 在頁面js文件中配置echart圖表樣式（這里我對圖表的配置選項option做了封裝，便于動態(tài)更新數(shù)據(jù)和切換圖表類型）
pages/test/test.js
import * as echarts from '../../ec-canvas/echarts';
const chartsOption = require('../../utils/chartsOption')
Page({
data: {
isSel: 1,
barData: {
xData: ['10:20', '10:30', '10:50'],
yData: [90, 60, 80]
},
ec: {
lazyLoad: true // 懶加載
}
},
selectTap(e) {
const isSel = e.currentTarget.dataset.sel
const that = this
const barData = that.data.barData
console.log(barData);
if (isSel == 1) {
barData.xData = ['10:20', '10:30', '10:50']
barData.yData = [90, 60, 80]
} else if (isSel == 2) {
barData.xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
barData.yData = [23, 50, 18, 25, 80, 25, 100]
} else {
barData.xData = ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07']
barData.yData = [90, 60, 80, 70, 40, 50, 100]
}
that.setData({
isSel,
barData
})
that.initChart(that.data.barData)
},
initChart(barData) {
// 綁定組件
this.barComponent = this.selectComponent("#mychart-dom-bar");
// 初始化柱狀圖
this.barComponent.init((canvas, width, height, dpr) => {
// 初始化圖表
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 解決模糊顯示問題
})
// 開發(fā)中根據(jù)從后端獲取barData數(shù)據(jù),動態(tài)更新圖表
chart.setOption(chartsOption.barOption(barData))
return chart
})
},
onShow() {
this.initChart(this.data.barData)
}
})
- (5) chartsOption.js文件封裝圖表的配置選項option，便于切換圖表（option配置項內(nèi)容有點多，就不一一介紹了，感興趣的小伙伴可以去官網(wǎng)開看一下，活學(xué)活用~）
utils/chartsOption.js
// 柱狀圖
function barOption(data) {
// 圖表內(nèi)容配置項
const option = {
xAxis: {
// 隱藏x軸刻度線
axisTick: {
show: false
},
data: data.xData
},
yAxis: {
// 隱藏y軸網(wǎng)格線
splitLine: {
show: false
},
// 隱藏y軸數(shù)值
axisLabel: {
show: false
},
},
grid: {
top: '10%',
right: '3%',
left: '3%',
bottom: '22%'
},
series: [{
type: 'bar',
barWidth: '20', // 柱的寬度
data: data.yData,
// 柱的數(shù)值顯示
label: {
show: true,
position: 'top',
},
itemStyle: {
color: '#3FD0AA',
barBorderRadius: 2,
borderWidth: 1,
shadowColor: '#3FD0AA',
borderType: 'dashed'
}
}],
// Echarts 橫向滾動
// dataZoom: [{
// type: 'slider',
// show: true,
// xAxisIndex: [0],
// startValue: 0,
// endValue: 7,
// height: '5%', // 滾動條高度
// bottom: '5%',
// left: '2%',
// right: '3%'
// }]
}
return option
}
// 其他圖表的配置...
module.exports = {
barOption
}
效果如下：
微信小程序+Echarts圖表文章來源：http://www.zghlxwxcb.cn/news/detail-757758.html
結(jié)語
最近工作上遇到在小程序中使用Echarts圖表做數(shù)據(jù)統(tǒng)計，剛從后端轉(zhuǎn)前端開發(fā)（也就是全干??），剛開始一頭霧水，花了一些時間整理了下，這里只是簡單記錄下用法、公司項目上也只是用到了柱狀圖展示、至于其他的圖表就不給大家展示了，用到哪些圖表可以在線定制下來，最好封裝一下配置選項，方便靈活切換圖表。全棧中的菜鳥一枚，對本文有什么疑問或者更好的建議，歡迎各位大佬提出指正！文章來源地址http://www.zghlxwxcb.cn/news/detail-757758.html
到了這里，關(guān)于微信小程序使用Echarts-for-weixin實現(xiàn)圖表動態(tài)更新數(shù)據(jù)、懶加載（干貨滿滿?。。。┑奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
