微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能
更新時(shí)間:2018年07月13日 11:45:22 作者:陪伴才是最長情的告白*
本文通過實(shí)例代碼給大家介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
具體代碼如下所示:
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
import * as echarts from '../../ec-canvas/echarts';
var barec = null
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: function (canvas, width, height) {
barec = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec);
return barec;
}
}
},
onReady() {
setTimeout(this.getData, 500);
},
//getData方法里發(fā)送ajax
getData(){
wx.showLoading({
title: '加載中...',
})
wx.request({
url: 'http://192.168.3.81/heart.php',
herder:{
"content-type":"json"
},
success:function(res){
console.log(res);
var data = res.data.info;
console.log(data);
barec.setOption({
grid: {
left: '3%',
right: '7%',
bottom: '3%',
containLabel: true
},
tooltip: {
// trigger: 'axis',
showDelay: 0,
formatter: function (params) {
if (params.value.length > 1) {
return params.seriesName + ' :<br/>'
+ params.value[0] + 'm '
+ params.value[1] + 'm ';
}
else {
return params.seriesName + ' :<br/>'
+ params.name + ' : '
+ params.value + 'm ';
}
},
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {
data: ["學(xué)生"],
left: 'center'
},
xAxis: [
{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} m'
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} m'
},
splitLine: {
show: false
}
}
],
series: [{
name: '學(xué)生',
// symbolSize: 20,
data:data,
type: 'scatter',
markArea: {
silent: true,
itemStyle: {
normal: {
color: 'transparent',
borderWidth: 1,
borderType: 'dashed'
}
},
data: [[{
name: '教室',
xAxis: '0',
yAxis: '0'
}, {
xAxis: '20',
yAxis: '20'
}]]
},
markPoint: {
// data: [
// { type: 'max', name: '最大值' },
// { type: 'min', name: '最小值' }
// ]
},
markLine: {
lineStyle: {
normal: {
type: 'solid'
}
},
// data: [
// { type: 'average', name: '平均值' },
// { xAxis: 160 }
// ]
}
}]
})
wx.hideLoading();
},
fail: function (res) { },
complete: function (res) { },
})
}
});
總結(jié)
以上所述是小編給大家介紹的微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
- 前端框架ECharts?dataset對(duì)數(shù)據(jù)可視化的高級(jí)管理
- ECharts transform數(shù)據(jù)轉(zhuǎn)換和dataZoom在項(xiàng)目中使用
- ECharts Canvas渲染在SVG合理運(yùn)用
- ECharts框架分段視覺映射在移動(dòng)端適配
- ECharts的三維可視化及在微信小程序中使用示例
- ECharts框架Sunburst拖拽功能實(shí)現(xiàn)方案詳解
- vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
- ECharts圖表使用及異步加載的特性示例詳解
相關(guān)文章
使用BootStrap實(shí)現(xiàn)懸浮窗口的效果
本文給大家分享使用BootStrap實(shí)現(xiàn)懸浮窗口的效果,神奇的 bootstrap就自帶了這個(gè)功能。所以就用bootstrap的popover插件做了,效果還不錯(cuò),感興趣的朋友參考下吧2016-12-12
前端實(shí)現(xiàn)獲取后端返回的文件流并下載三種方法
文件下載是最常見的流形式返回?cái)?shù)據(jù)的應(yīng)用場景之一,通過流形式返回文件內(nèi)容,可以避免將整個(gè)文件加載到內(nèi)存中,從而減少內(nèi)存消耗,這篇文章主要介紹了前端實(shí)現(xiàn)獲取后端返回的文件流并下載的三種方法,需要的朋友可以參考下2025-04-04
Bootstrap每天必學(xué)之折疊(Collapse)插件
Bootstrap每天必學(xué)之折疊(Collapse)插件,折疊插件可以很容易地讓頁面區(qū)域折疊起來,感興趣的小伙伴們可以參考一下2016-04-04
JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果,涉及javascript結(jié)合鼠標(biāo)事件對(duì)頁面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-09-09
精通Javascript系列之?dāng)?shù)據(jù)類型 字符串
下面先講一下字符串String字符串由零個(gè)或者多個(gè)字符構(gòu)成。字符可以包括字母、數(shù)字、標(biāo)點(diǎn)符號(hào)和空格。2011-06-06

