小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我每次点击tab之后发送请求, 请求成功之后初始化
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
不能再初始化了,第一次初始化的时候canvas已经绘制完了,可以这样写
chart.setOption(option,true);
只改option里的数据就行了
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
不能再初始化了,第一次初始化的时候canvas已经绘制完了,可以这样写
chart.setOption(option,true);
只改option里的数据就行了
import * as echarts from '../../ec-canvas/echarts';
Page({
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that=this;
that.setData({
ec: {
onInit: that.initChart
}
})
// 模拟请求
var times=setTimeout(function(){
console.log("模拟请求")
// 数据
that.data.xdata=['00:00','01:00', '02:00', '03:00', '04:00', '05:00', '6:00', '7:00','8:00','9:00','10:00','11:00','12:00','13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00','21:00','22:00','23:00'];
that.data.data1=[18, 36, 65, 30, 78, 340, 33,18, 36, 65, 30, 78, 340, 33,18, 36, 65, 30, 78, 340, 33,18, 36, 65];
that.data.data2=[12, 50, 51, 35, 70, 30, 200,12, 50, 51, 35, 70, 30, 20,12, 50, 51, 35, 70, 30, 200,12, 50, 51];
clearTimeout(times);
},1000)
},
// 数据切换
qiehuan(){
let that=this;
// 修改数据
that.data.xdata=['00:00','01:00'];
that.data.data1=[ 36, 65];
that.data.data2=[ 200,12];
// 绘制
that.chart.setOption(that.getOption(),true);
},
// 折线图
initChart(canvas, width, height, dpr) {
let that=this;
// 由于请求数据有延迟所以写一个时间函数,当数据存在的时候再执行绘制
var times=setInterval(function(){
var xdata=that.data.xdata;
var data1=that.data.data1;
var data2=that.data.data2;
if(xdata && data1 && data2){
clearInterval(times)
that.chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(that.chart);
that.chart.setOption(that.getOption(),true);
return that.chart;
}
},100)
},
getOption(){
let that=this;
var xdata=that.data.xdata;
var data1=that.data.data1;
var data2=that.data.data2;
return {
title:{
text: '停车场24小时流量动态图',
left: 'center',
top:'4%',
textStyle:{
fontSize:14,
color:'#333333'
}
},
legend: {
data: ['已停车位', '剩余车位'],
z: 100,
top:'15%',
right:'4%',
icon:'rect',
itemWidth:11,
itemHeight:8,
textStyle:{
fontSize:12,
color:'#8C8C8C'
}
},
grid:{
left: '5%',
right: '5%',
bottom: '5%',
top:'30%',
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis',
},
xAxis: {
type: 'category',
data: xdata,
axisLabel : {
show : true,
// interval: 0,
// rotate:45, //代表逆时针旋转45度
textStyle:{
color:'#8C8C8C',
fontSize:12
}
},
axisLine : {
show : true,
lineStyle : {
color:'#8C8C8C'
}
// x轴坐标轴颜色
},
axisTick : {
show : true,
lineStyle : {
color:'#8C8C8C'
}
// x轴刻度的颜色
},
},
yAxis: {
x: 'center',
type: 'value',
axisLabel : {
show : true,
textStyle : {
color : '#999',
fontSize:12
}
},
axisLine : {
lineStyle : {
color : 'transparent'
}
// y轴坐标轴颜色
},
axisTick : {
lineStyle : {
color : 'transparent'
}
// y轴刻度的颜色
},
//设置网格线颜色
splitLine : {
show : true,
lineStyle : {
color : ['#D8D8D8'],
width : 1,
type : 'solid'
}
},
},
series: [{
name: '已停车位',
type: 'line',
smooth: false,//设置成曲线
symbol:'none',//取消折点圆圈
data: data1,
itemStyle : {
normal:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#04BEFE'},
{offset: 1, color: '#4481EB'}
]
)
}
},
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#BEE2FC" // 0% 处的颜色
}, {
offset: 0.7,
color: "#BEE2FC" // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
}, {
name: '剩余车位',
type: 'line',
smooth: false,//设置成曲线
symbol:'none',//取消折点圆圈
data: data2,
itemStyle : {
normal:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#F9D423'},
{offset: 1, color: '#F83600'}
]
)
}
},
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#FEE7BB" // 0% 处的颜色
}, {
offset: 0.7,
color: "#FDC4B3" // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
}]
};
}
})