明霞山资源网 Design By www.htccd.com
具体代码如下所示:
<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方法里发送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: ["学生"],
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: '学生',
// 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) { },
})
}
});
总结
以上所述是小编给大家介绍的微信小程序中使用ECharts 异步加载数据实现图表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。