最近才学习微信小程序开发,一点一点填坑中....
1.下载
echart微信小程序git下载地址
https://github.com/ecomfe/echarts-for-weixin
2.引入
将下载后的压缩包解压,将里面对应ec-canvas文件夹,放到微信小程序项目的根目录下,与app.js同级。
3.使用
一、.wxml页面(在使用到echarts组件的目录下)
<view class="box">
<view class="echarts-box">
<ec-canvas id="mychart" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
</view>
二、wxss页面
/* pages/data_curve/data_curve.wxss */
.box {
width:100%;
height:100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.echarts-box{
height: 50%;
padding: 0 20rpx;
}
三、 .json文件
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
四、.js文件
引入echart
import * as echarts from '../../ec-canvas/echarts';
data
data: {
ec: {
lazyLoad: true
},
equipId: '1210467320944361473',
monitorTimeBegin: '1584547200',
monitorTimeEnd: '1585151999',
temperatureData: [],
humidityData: [],
dateArr: []
},
onLoad方法
onLoad: function (options) {
this.echartsComponnet = this.selectComponent('#mychart');
this.init_echarts()
},
获取数据方法
//初始化
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
chart.setOption(this.getOption());
// 返回 chart 实例,否则会影响事件处理等
return chart;
});
},
// 获取数据
getOption: function () {
var that = this
var option = {
title: {
left: 'center',
text: '温湿度设备曲线'
},
color: ['#CD5555', '#00a0e9'],
tooltip: {
trigger: 'axis',
formatter: function (params) {
// 当前这组数据值,是一个数组
let html = params[0].name + '<br>'
for (let i = 0; i < params.length; i++) {
// 判断每一项的值的名字
if (params[i].seriesName === '温度(℃)') {
html += params[i].seriesName + ':' + params[i].value + '℃'
} else {
html += params[i].seriesName + ':' + params[i].value + '%'
}
}
return html
},
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
data: ['温度(℃)', '湿度(%)']
},
grid: {
top: 90,
bottom: 30
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: '#d14a61'
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'温度 ' +
params.value +
(params.seriesData.length
? ':' + params.seriesData[0].data
: '')
)
}
}
},
// 当前一天的时间
data: that.data.dateArr
}
],
yAxis: [
{
type: 'value',
name: '温度(℃)',
axisLabel: {
formatter: '{value}'
},
axisLine: {
lineStyle: {
color: 'gray'
}
},
splitLine: { show: false }
},
{
type: 'value',
name: '湿度(%)',
axisLabel: {
formatter: '{value}'
},
axisLine: {
lineStyle: {
color: 'gray'
}
},
splitLine: { show: false }
}
],
series: [
{
name: '温度(℃)',
type: 'line',
lineStyle: {
color: '#CD5555'
},
smooth: true,
data: that.data.temperatureData,
},
{
name: '湿度(%)',
type: 'line',
lineStyle: {
color: '#00a0e9'
},
yAxisIndex: 1,
smooth: true,
data: that.data.humidityData
}
]
}
return option
},
// 获取温湿度设备曲线数据
_getLineInfo() {
const that = this
wx.showLoading({
title: '加载中',
})
// 请求地址,传参等
httpRequest(GETLINE, { equipId: that.data.equipId, monitorTimeBegin: that.data.monitorTimeBegin, monitorTimeEnd: that.data.monitorTimeEnd }, 'POST').then(res => {
wx.hideLoading()
const { code, data, msg } = res.data
if (code === '1') {
// 将获取的数据循环到series数组里
that.setData({
temperatureData: data.map(({ temperature }) => temperature),
humidityData: data.map(({ humidity }) => humidity),
dateArr: data.map(({ monitorTime }) => monitorTime)
})
that.init_echarts()
} else {
wx.showToast({
title: msg,
icon: 'none',
duration: 2000
})
}
}).catch(err => {
wx.hideLoading()
console.log(err)
})
},
onReady方法
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this._getLineInfo()
},
效果如图: