人在家中坐，鍋從天上來。
半個月前本來在家寫著一個項目，還沒來得及提測，領(lǐng)導(dǎo)突然一個電話，需要立刻去支援另一個項目，一打聽，一個爛尾半年的項目，縱使內(nèi)心不愿意，還是要去啊。
因為魯迅說過，生活就像強*，既然不能反抗，那就好好享受吧。
這個項目分為PC端、用戶端小程序和商家端小程序，這里主要講講在商家端中的某個模塊，需要用到數(shù)據(jù)統(tǒng)計圖表，當(dāng)時覺得有兩個插件不錯：
百度 echarts阿里 AntV因為之前在項目中使用echarts比較多，所以最終選擇了echarts作為項目中的圖表插件echarts的引入我是按照echarts官網(wǎng)教程來引入的，很簡單，不多說。
傳送門echarts中使用多個圖表wxml代碼如下：
js代碼如下data: {
isShoweyes: true, turnoverEc: {
lazyLoad: true, }
, customerEc: {
lazyLoad: true, }
, priceEc: {
lazyLoad: true, }
, echartsData: {
}
}
, onLoad: function (options) {
this.echartsComponnet1 = this.selectComponent('
#mychart-dom-turnover'
);
this.echartsComponnet2 = this.selectComponent('
#mychart-dom-customer'
);
this.echartsComponnet3 = this.selectComponent('
#mychart-dom-price'
);
}
, getData: function () {
// .... 獲取數(shù)據(jù) for (let i = 1;
i i++) {
if (!Chart[i]) {
this.initEcharts(i);
//初始化圖表 }
else {
this.setOption(i);
//更新數(shù)據(jù) }
}
}
, initEcharts: function (i) {
this['
echartsComponnet'
+ i].init((canvas, width, height) => {
// 初始化圖表 Chart[i - 1] = echarts.init(canvas, null, {
width: width, height: height }
);
this.setOption(i);
// 注意這里一定要返回 chart 實例，否則會影響事件處理等 return Chart[i - 1];
}
);
}
, setOption: function (i) {
Chart[i - 1].clear();
// 清除 Chart[i - 1].setOption(this['
getOption'
+ i]());
//獲取新數(shù)據(jù) }
, getOption1() {
let {
echartsData }
= this.data;
return {
color: ['
#0179FF'
], tooltip: {
trigger: '
axis'
, axisPointer: {
// 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效 type: '
shadow'
, // 默認(rèn)為直線，可選為：
'
line'
| '
shadow'
shadowStyle: {
opacity: 0.8 }
}
, formatter: this.formatterTooltip, position: this.setTooltipPositionfunction }
, grid: {
left: 20, right: 20, bottom: 15, top: 40, containLabel: true }
, xAxis: [{
type: '
category'
, axisLine: {
lineStyle: {
color: '
#999'
, }
}
, axisLabel: {
color: '
#666'
, }
, data: echartsData.totalRecentRansactions.dates, }
], yAxis: [{
type: '
value'
, axisTick: {
show: false }
, axisLine: {
show: false, lineStyle: {
color: '
#999'
, }
}
, axisLabel: {
color: '
#666'
, fontSize: 13 }
}
], series: [{
name: '
訂單總額'
, type: '
line'
, label: {
normal: {
show: true,// 是否在折線點上顯示數(shù)值 position: '
inside'
}
}
, data: echartsData.totalRecentRansactions.allTotalMoney }
] }
;
}
遇到的坑 1.Tooltip支持不好 雖然官網(wǎng)上echarts暫時不支持Tooltip，但是經(jīng)過試驗，還是Tooltip還是有效果的，但是，x軸對應(yīng)的坐標(biāo)值并不會顯示在Tooltip中，需要使用Tooltip的formatter函數(shù)，自己處理需要展示的數(shù)據(jù)，代碼如下：
// 格式化Tooltip formatterTooltip(param) {
return "日期：
" + param[0].name + " " + param[0].seriesName + ": " + param[0].data }
, 2.當(dāng)點擊靠近屏幕右側(cè)或者底部的item項時，Tooltip會溢出邊界，解決辦法：
給Tooltip的position函數(shù)返回一個根據(jù)點擊位置計算的坐標(biāo)點，（也可以給一個固定的位置，但是體驗不好） // 更改Tooltip的位置，處理邊界超出的情況 setTooltipPositionfunction(point, params, dom, rect, size) {
//其中point為當(dāng)前鼠標(biāo)的位置，size中有兩個屬性：
viewSize和contentSize，分別為外層div和tooltip提示框的大小 // 更改提示框的顯示位置 let x = point[0];
// let y = point[1];
// size: 包括 dom 的尺寸和 echarts 容器的當(dāng)前尺寸，例如：
{
contentSize: [width, height], viewSize: [width, height]}
let boxWidth = size.contentSize[0];
// let boxHeight = size.contentSize[1];
// size里面此處獲取不到dom的高度，值為NAN，所以下面指定了一個固定值 let boxHeight = 50;
let posX = 0;
//x坐標(biāo)位置 let posY = 0;
//y坐標(biāo)位置 if (x //左邊放不開 posX = 5;
}
else {
//左邊放的下 posX = x - boxWidth;
}
if (y //上邊放不開 posY = 5;
}
else {
//上邊放得下 posY = y - boxHeight;
}
return [posX, posY];
}
,上面需要注意的是，獲取dom的高度，官方上說的是可以從position回調(diào)函數(shù)的size參數(shù)中獲取到dom的高度，但是我打印出來卻是NAN。
打印出來結(jié)果：
后來發(fā)現(xiàn)參數(shù)params中outerWidth的值和參數(shù)size中contentSize的寬度值相同，所以果斷取參數(shù)params中的outerHeight作為dom的高度，最后運行的效果確實沒有問題。
3.左右滑動柱狀圖時，柱狀圖畫板會變空白，點一下空白又會出現(xiàn)柱狀圖，而且這個問題只有在柱狀圖上出現(xiàn)！剛開始以為是自己代碼的問題，后來自己檢查了幾遍，確實沒什么問題，然后掃碼體驗了官方的小程序demo，發(fā)現(xiàn)也有這個問題，頓時只想對它口吐芬芳。
既然是官方代碼自身的問題，于是去看了下源碼，如下：
官方代碼給畫布綁定一個bindtouchmove事件touchMove(e) {
if (this.chart && e.touches.length > 0) {
var touch = e.touches[0];
var handler = this.chart.getZr().handler;
handler.dispatch('
mousemove'
, {
zrX: touch.x, zrY: touch.y }
);
handler.processGesture(wrapTouch(e), '
change'
);
}
}
,這里面又去調(diào)用了echarts.js中的方法，最后想了一個粗暴的解決辦法：
刪掉源碼中的bindtouchmove事件完美解決，哈哈或或紅紅火火恍恍惚惚~~~以上就是我在小程序中使用echarts遇到的坑，希望能幫到后來踩坑的人。
最終效果圖片Demo源碼點 這 里推薦教程：
《JS教程》以上就是微信小程序中使用echarts的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序 echarts本文轉(zhuǎn)載于：
CSDN，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
如何推廣小程序業(yè)務(wù)？
下一篇：
微信小程序 絕對路徑 require相關(guān)文章相關(guān)視頻學(xué)習(xí)微信小程序如何使用echarts圖表微信小程序如何注銷釋放名額Proxy 對象的了解及學(xué)習(xí)怎么看小程序版本號微信小程序中使用echarts數(shù)據(jù)表的更新/刪除/查詢操作數(shù)據(jù)表的連接與新增操作2數(shù)據(jù)表的連接與新增操作1數(shù)組常用函數(shù)-3 [溫州做小程序]