小程序中实时（间隔1秒等）获取的数据，可能是网络数据，也可能是小程序中某函数产生的数据，需要同步数据更新频率显示出来。点击按钮才显示折线图，不点击不显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
显示效果：X轴为一个数据dataT，即计数。Y轴有两个数据（dataPV, dataSP），同X轴同步变化（我这里的多个数据其实可以用一个大数组包下，但没学会）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
1，从ECharts官网下载echarts，可以全部下载，也可以定制下载，我需要折线图，选择定制下载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
下载网站：ECharts 在线构建 (apache.org)，下载时选择需要的图表，不选择工具集(工具集有保存图表为图片等功能)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
2，将ec-canvas拷贝到小程序目录中，并代替定值下载的js文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
3，在.json中定义：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}4，在.wxml中插入图表：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
<view class="my-chart">
<ec-canvas id="lazy-mychart-dom" canvas-id="lazy-mychart" ec="{{lazyEc}}"></ec-canvas>
</view>5，在.wxss中定义样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
.my-chart {
width: 750rpx;
height: 500rpx;
}
ec-canvas {
width: 100%;
height: 100%;
}5，在.js中引入图表：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
import * as echarts from '../../ec-canvas/echarts'以上在其它很多地方都有详细介绍，不明白的地方可以参考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
3，在.wxml中添加按钮，点击按钮显示图表：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
<button bindtap="changeType">折线图</button>4，以下为.js的全部代码（尽量标注清楚了）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
import * as echarts from '../../ec-canvas/echarts'
Page({
data: {
times: 0,
lazyEc: {
lazyLoad: true
},
dataT: [],
dataPV: [],
dataSP: []
},
onLoad(options) {
//获取到组件
let that = this;
this.lazyComponent = this.selectComponent('#lazy-mychart-dom')
setTimeout(() => {
this.init([])
}, 1000)
},
init(optionData) { //手动初始化
this.lazyComponent.init((canvas, width, height, dpr) => {
let chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRation: dpr
})
let option = getOption(optionData) // echarts的配置信息
chart.setOption(option)
this.chart = chart //将图表实例绑定到this上，方便其他函数访问
return chart
})
},
//mark:点击支出收入
changeType(e) { //确定按钮，只按一次，可以根据需要做逻辑disable掉
var temprrT = new Array(50).fill(0);//50个数组，根据需要修改
var temprrPV = new Array(50).fill(0);
var temprrSP = new Array(50).fill(0);
var times = 0;
this.data.dataT = this.data.dataPV = this.data.dataSP = [0];//这句好像没什么用
var i = setInterval(() => {
times++;
if (times >= 50) { //同上，数据个数根据需要修改
clearInterval(i)
} else {
temprrT.shift()
temprrT.push(times)
temprrPV.shift()
temprrPV.push(Math.random().toFixed(2))
temprrSP.shift()
temprrSP.push(Math.random().toFixed(2))
console.log('数组', temprrT, temprrPV, temprrSP)
this.setData({
dataT: temprrT,
dataPV: temprrPV,
dataSP: temprrSP
})
}
let option = getOption(this.data.dataT, this.data.dataPV, this.data.dataSP)
this.chart.setOption(option)
}, 1000);
},
})
//mark:getOption
function getOption(dataT, dataPV, dataSP) {
return {
title: {
text: '趋势图',
left: 'center'
},
color: ["#37A2DA"],
grid: {
containLabel: true
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataT
},
yAxis: {
type: 'value',
scale: true,//自动Y轴坐标居中
boundaryGap: ["0.1", "0.1"],//上下留白10%
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [
{
name: 'PV',
type: 'line',
showSymbol: false,
smooth: true,
color: ["#00cc00"],
data: dataPV
},
{
name: 'SP',
type: 'line',
showSymbol: false,
smooth: true,
color: ["#f08080"],
data: dataSP
}
]
}
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html