1.wxml文件
<view class="message-box1">
<view class="message-box-tit">
<image src="/images/yl.png" class="container-icon"></image>
<text class="item-cont">日压力监测（kPa）</text>
</view>
<view class="echarts-box">
<ec-canvas id="mychart-dom-bar1" canvas-id="mychart-bar1" ec="{{ ec1 }}" force-use-old-canvas="true"></ec-canvas>
</view>
</view>
2.json文件
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
},
"navigationBarTitleText": "看板",
"navigationBarTextStyle": "white"
}
3.wxss文件
.message-box1 {
margin: 35rpx auto;
width: 90%;
height: 309rpx;
box-shadow: 0 0 10rpx #dedede;
border-radius: 20rpx;
}
.message-box-tit {
font-weight: 500;
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
color: #20B2AA;
padding-left: 20rpx;
box-shadow: 0 0 10rpx 0 #dedede;
border-radius: 20rpx 20rpx 0 0;
}
.item-cont {
font-weight: 400;
font-size: 24rpx;
color: #20B2AA;
font-family: Source Han Sans CN;
}
.echarts-box {
width: 100%;
height: 240rpx;
}
.ec-canvas {
width: 100%;
height: 70%;
}
4.js文件
import {getByq} from '../../http/api/common'
import * as echarts from '../../ec-canvas/echarts' // 这个是自己实际的目录
function initChart(chart,wdList,wdVals) { // 这部分是固定的不需要 是通用的
// canvas.setChart(chart);
// 这是 唯一需要更改的，可根据实际情况api更改图标
// option里根据需求修改
var option = {
grid: {
top: '10%',
left: '2%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: wdList
},
yAxis: {
type: 'value'
},
series: [{
data: wdVals,
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
color: 'rgba(255,216,76,1)'
},
areaStyle: {
color: 'rgba(255,216,76,0.6)'
}
}]
};
chart.setOption(option);
return chart;
}
function initChart1(chart1,ylList,ylVals) {
// option里根据需求修改
var option1 = {
grid: {
top: '10%',
left: '2%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ylList
},
yAxis: {
type: 'value'
},
series: [{
data: ylVals,
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
color: 'rgba(76,228,255,1)'
},
areaStyle: {
color: 'rgba(76,228,255,0.6)'
}
}]
};
chart1.setOption(option1);
return chart1;
}
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
lazyLoad:true
},
ec1: {
lazyLoad:true
},
byqName:"",
sensorList: [],
temData:"",
ylData:"",
keyword: '',
show:false,
wdList:[],
wdVals:[],
ylList:[],
ylVals:[]
},
init_chart:function(wdList,wdVals){
let Component = this.selectComponent('#mychart-dom-bar')
Component.init((canvas,width,height,dpr)=> {
const chart= echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio:dpr
});
initChart(chart,wdList,wdVals)
return chart;
})
},
init_chart1:function(ylList,ylVals){
let Component = this.selectComponent('#mychart-dom-bar1')
Component.init((canvas,width,height,dpr)=> {
const chart1= echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio:dpr
});
initChart1(chart1,ylList,ylVals)
return chart1;
})
},//自己的接口数据，此方法内所有数据应该根据自己接口数据做修改
getylInfo(id){
this.data.id=id
getByq(id).then(res=>{
if(res.data.code === 200){
let arr=[]
let arr1=[]
if(res.data.data.equipmentVoList.length!==0){
res.data.data.equipmentVoList.forEach((item, index) => {
if(index === 0){
arr = Object.values(item.dataList)
this.setData({
wdList :Object.keys(item.dataList),
wdVals : arr
})
}
if(index === 1){
arr1 = Object.values(item.dataList)
this.setData({
ylList :Object.keys(item.dataList),
ylVals : arr1
})
}
})
}
else{
wx.showToast({
title: '该看板下暂无数据',
icon:'none',
duration:1000
})
}
this.setData({
byqName:res.data.data.transformerName,
sensorList:res.data.data.equipmentVoList,
temData:arr.length==0?0:arr[arr.length-1],
ylData:arr1.length==0?0:arr1[arr1.length-1],
})
this.init_chart(this.data.wdList,this.data.wdVals)
this.init_chart1(this.data.ylList,this.data.ylVals)
}
})
},
/**
* 生命周期函数--监听页面加载
*/onLoad: function (options) {
const id = options.id
this.getylInfo(id)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})