index.js
// pages/complete/complete.js
import * as echarts from '../../ec-canvas/echarts';
const util = require('../../utils/util.js')
const app = getApp();
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
legend: {
textStyle:{
// color: "RGB(193,223,255)"
color:'white'
},
data:['平均值', '总和','最新值'],
top: 0,
left: 'center',
},
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: true,
lineStyle: {
color: 'white'
// color: "RGB(47,68,114)"
}
},
axisLabel: {
textStyle: {
fontFamily: 'Microsoft YaHei',
color: 'white'
// color: "RGB(145,155,183)"
}
},
data: ['2020-1-2', '2020-1-4', '2020-1-5', '2020-1-8', '2020-1-21', '2020-1-23', '2020-3-3'],
// show: false
},
yAxis: {
x: 'center',
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'white'
// color: "RGB(47,68,114)"
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {
textStyle: {
fontFamily: 'Microsoft YaHei',
// color: "RGB(145,155,183)"
color: 'white'
}
}
// show: false
},
//dataZoom 高度
dataZoom: [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'5%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '100%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#000"},
borderColor:"#90979c"
}, {
type: 'inside',
start: 0,
end: 100
}],
series: [{
name: '平均值',
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: '#37A2DA' //改变区域颜色
}
},
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: '总和',
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: '#67E0E3' //改变区域颜色
}
},
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: '最新值',
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: '#9FE6B8' //改变区域颜色
}
},
data: [10, 30, 31, 50, 40, 20, 10]
}]
};
chart.setOption(option);
return chart;
}
Page({
/**
* 页面的初始数据
*/
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
},
pointList:[
{
"point":"AR_TEST_VAR1",
"pointName":"测试单位",
"pointValue":"0.0",
"pointUnit":null,
"lastUpdateTime":"2020-07-08 20:39:00"
},
{
"point":"AR_TEST_VAR2",
"pointName":"测试点位2",
"pointValue":"0.0",
"pointUnit":"无",
"lastUpdateTime":"2020-07-08 20:39:00"
},
],
imageUrl:"/images/shebei.jpg",
},
bindHome:function(){
wx.navigateTo({
// url: '../logs/logs'
url: '/pages/index/index'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({ title: '设备详情' })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.html
index.json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
index.wxss
.box{
width:100%;
height:850rpx;
margin-top: 70rpx;
}
ec-canvas {
width: 100%;
height: 100%;
}
