小程序中使用Echart
最近有幾個(gè)小程序用到了圖表，把我一頓折騰。所以來講一下使用圖表時(shí)所遇到的問題。
我們所用到的是 ECharts 的微信小程序版本 ;它提供了一個(gè)小程序原生的組件，然后我們只需要在相關(guān)頁面引用改組件就好了。
使用前準(zhǔn)備
先下載 ecomfe/echarts-for-weixin 中 ec-canvas 整個(gè)文件夾里面的文件
引用：然后在你的頁面中 的 json文件中 引用。當(dāng)然你也可以作為全局組件寫在app.json 中。
{
"usingComponents": {
"ec-canvas": "../../components/ec-canvas/ec-canvas"
}
}
復(fù)制代碼
注意：上面的 ec-canvas 引用組件名不能隨意改變，因?yàn)樵诜庋b的組件 ec-canvas.js 中，需要找到 該節(jié)點(diǎn) 。
使用
我們要手動(dòng)給 我們的圖表設(shè)置寬高，不然頁面只會(huì)顯示空白。也就是給.container 設(shè)置寬高。
<view>
<ec-canvas
id="mychart-dom-bar"
canvas-id="mychart-bar"
ec="{{ ec }}">
</ec- canvas>
</view>
復(fù)制代碼
其中 ec 是一個(gè)我們?cè)?我們頁面 中定義的對(duì)象，它使得圖表能夠在頁面加載后被初始化并設(shè)置。初始化圖表的方法如下：
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
// 圖表數(shù)據(jù)初始化
var option = {
...
};
chart.setOption(option);
return chart;
}
復(fù)制代碼
這對(duì)于所有 ECharts 圖表都是通用的，用戶只需要修改上面 option 的內(nèi)容，即可改變圖表。 option 的使用方法參見 ECharts 配置項(xiàng)文檔 。對(duì)于不熟悉 ECharts 的用戶，可以參見 [5 分鐘上手 ECharts]( echarts.baidu.com/tutorial.ht… 分鐘上手 ECharts) 教程。
因?yàn)槲覀円话愣际切枰舆t加載的， 也就是獲取數(shù)據(jù)后才加載圖表的,所以我們不能直接使用,
我們需要在獲取數(shù)據(jù)重新設(shè)置 options 之后才能使用。
代碼入下:
**.wxml 文件 **
<view>
<view>全國(guó)疫情新趨勢(shì)</view>
<ec-canvas
wx:if="{{hasGetOption}}"
class="map-chart"
id="map-chart"
canvas-id="map-chart"
ec="{{ ec }}">
</ec-canvas>
</view>
復(fù)制代碼
.js 文件
// 頁面中需要引入 ec-canvas 文件夾中的 echcrts.js
import * as echarts from '../../components/ec-canvas/echarts';
page({
data: {
hasGetOption: false,
ec: {
// 當(dāng)我們?cè)O(shè)置lazyLoad 為true 的時(shí)候，我們需要手動(dòng)初始化圖表。
lazyLoad: true,
}
},
ready() {
// 在ready 的時(shí)候獲取組件的實(shí)例。否則可能獲取不到。
this.echartInstance = this.selectComponent('.map-chart');
},
setOption () {
let option = {
title: {
// text: '全國(guó)疫情新增趨勢(shì)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: [ '確診']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [{
name: '確診',
type: 'line',
stack: '總量',
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true
}
]
}
},
initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
let option = this.getOption();
chart.setOption(option);
return chart;
},
getPageData() {
wx.request({
...
success: (res) => {
// 獲取到數(shù)據(jù)后再手動(dòng)初始化
this.echartInstance.init(this.initChart);
this.setData({
hasGetOption: true,
...
})
}
})
}
})
復(fù)制代碼
在之前的版本中會(huì)出現(xiàn)這么一個(gè)問題：
因?yàn)樽钚禄A(chǔ)庫版本中 支持 Canvas 2d，這個(gè)可以提升渲染性能，解決非同層渲染問題。
解決這個(gè)問題只需要在 ec-cnavas.js 的data 中將 isUseNewCanvas 設(shè)為true即可。
在 Taro 中使用
因?yàn)?/span> Taro 中可以使用 微信中的原生組件，以及微信中的自定義組件。 所以使用方法同微信小程序類似。
下載
頁面引用
config = {
navigationBarTitleText: '首頁',
usingComponents: {
"ec-canvas": "../../components/ec-canvas/ec-canvas"
}
}
復(fù)制代碼
使用：
state = {
ec: {
lazyLoad: true,
}
};
// 獲取組件實(shí)例。
setCanvasRef = node => this.canvasRef = node;
render () {
return (
<View className="line-chart">
<ec-canvas
id="price-chart"
canvas-id="price-chart"
ref={this.setCanvasRef}
ec={ec} />
</View>)
}
復(fù)制代碼
然后在數(shù)據(jù)請(qǐng)求完后 再圖表初始化。 init 是再組件中定義的
this.canvasRef.init (this.initChart);
復(fù)制代碼
