在微信小程式中使用Echarts
在小程式中如何引用ECharts: 引用方式可檢視ECharts官網
在開發過程中，我們需要從後臺獲取需要ECharts 展示的data資料；然後傳遞到ec-charts 元件當中，展示最新獲取到的動態圖表；
微信小程式中如何給ECharts 中動態傳參到data[] ?
“talk is cheap,show me the code ”
// 以下以ECharts-Pie 作為示例：
detail.wxss:
.pieContainer {
position:absolute;
top:60vh;
bottom:0;
left:18px;
right:0;
width:50vw;
height:100px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
}
ec-canvas {
width: 100%;
height: 100%;
/*border:1px solid red;*/
}
複製程式碼detail.wxml:
<view class="pieContainer">
<ec-canvas
id="mychart-dom-pie"
canvas-id="mychart-pie"
ec="{{ ec }}"
bind:init="echartInit"
data-record="{{recordData}}">
</ec-canvas>
</view>
複製程式碼與官網相比：
- wxml檔案中，ec-canvas標籤中，比官網示例中多了一個data-record 屬性；屬性中繫結的是detail.js中data 資料如下：
detail.js:
// pages/detail/detail.js
import * as echarts from '../../packages/ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height,recordData) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
backgroundColor: "#ffffff",
color: ["#14DA12","#DA0D07","#FFDB5C" ],
series: [{
label: {
normal: {
fontSize: 14
}
},
labelLine:{
normal:{
length:5, // 改變標示線的長度
lineStyle: {
color: "black" // 改變標示線的顏色
}
},
},
name:'赴約記錄',
type: 'pie',
center: ['50%', '50%'],
radius: [0, '60%'],
data:[],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 2, 2, 0.3)'
}
}
}]
};
option.series[0].data=recordData;
chart.setOption(option);
return chart;
}
Page({
/**
* 頁面的初始資料
*/
data: {
ec: {
},
recordData:[{
value: 9,
name: '赴約'
}, {
value: 1,
name: '爽約'
},{
value: 2,
name: '取消'
}
]
},
echartInit(e) {
console.log(e);
let recordData=e.target.dataset.record;
initChart(e.detail.canvas, e.detail.width, e.detail.height,recordData);
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
this.setData({
signature: app.globalData.accountInfo.signature
});
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})
複製程式碼與官網示例相比，在以上程式碼中：
- function initChart(canvas, width, height,recordData)；多了一個引數recordData；
- 將option.series[0].data陣列設定為空陣列，並由傳參的方式傳遞賦值：option.series[0].data=recordData;
思考總結：
在wxml中ec-chart 元件引入後，相當於一個html標籤，繫結的函式仍有一樣的event引數；
我們通過瀏覽器檢視以下程式碼中的log日誌發現：
echartInit(e) {
console.log(e);
let recordData=e.target.dataset.record;
initChart(e.detail.canvas, e.detail.width, e.detail.height,recordData);
},
複製程式碼e.target.dataset.record正是 detail.wxml 中的data-record 屬性：
<ec-canvas
id="mychart-dom-pie"
canvas-id="mychart-pie"
ec="{{ ec }}"
bind:init="echartInit"
data-record="{{recordData}}">
</ec-canvas>
傳遞資料內容正是detail.js中的data 屬性值：
recordData:[{
value: 9,
name: '赴約'
}, {
value: 1,
name: '爽約'
},{
value: 2,
name: '取消'
}
]
複製程式碼