|
|
|
// pages/qiyeyongdian/detail/detail.js
|
|
|
|
|
|
|
|
import * as echarts from '../../ec-canvas/echarts';
|
|
|
|
|
|
|
|
const app = getApp();
|
|
|
|
var Chart = null;
|
|
|
|
Page({
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 页面的初始数据
|
|
|
|
*/
|
|
|
|
data: {
|
|
|
|
showModal: false,
|
|
|
|
monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
|
|
time: '2019.01.01-2019.01.31',
|
|
|
|
changeColor: -1,
|
|
|
|
ec: {
|
|
|
|
|
|
|
|
onInit: function (canvas, width, height) {
|
|
|
|
|
|
|
|
chart = echarts.init(canvas, null, {
|
|
|
|
|
|
|
|
width: width,
|
|
|
|
|
|
|
|
height: height
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
canvas.setChart(chart);
|
|
|
|
|
|
|
|
return chart;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
lazyLoad: true, // 延迟加载
|
|
|
|
showt: false
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
choice(e) {
|
|
|
|
let index = e.currentTarget.dataset.id;
|
|
|
|
index = index + 1
|
|
|
|
if (index == 1 || index == 3 || index == 5 || index == 7 || index == 8 || index == 10 || index == 12) {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + "2019." + "0" + index + ".01" + "-2019" + index + ".31" + "）"
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + "2019." + "0" + index + ".01" + "-2019" + index + ".30" + "）"
|
|
|
|
})
|
|
|
|
}
|
|
|
|
this.setData({
|
|
|
|
changeColor: index - 1
|
|
|
|
})
|
|
|
|
},
|
|
|
|
three() {
|
|
|
|
this.setData({
|
|
|
|
time: '近30天',
|
|
|
|
showt: !this.data.showt
|
|
|
|
})
|
|
|
|
},
|
|
|
|
toShowModal(e) {
|
|
|
|
this.setData({
|
|
|
|
showModal: true
|
|
|
|
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
hideModal() {
|
|
|
|
this.setData({
|
|
|
|
showModal: false
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面加载
|
|
|
|
*/
|
|
|
|
onLoad: function (options) {
|
|
|
|
|
|
|
|
this.echartsComponnet = this.selectComponent('#mychart');
|
|
|
|
|
|
|
|
//如果是第一次绘制
|
|
|
|
|
|
|
|
if (!Chart) {
|
|
|
|
|
|
|
|
this.init_echarts(); //初始化图表
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setOption(Chart); //更新数据
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
//初始化图表
|
|
|
|
|
|
|
|
init_echarts: function () {
|
|
|
|
|
|
|
|
this.echartsComponnet.init((canvas, width, height) => {
|
|
|
|
|
|
|
|
// 初始化图表
|
|
|
|
|
|
|
|
const Chart = echarts.init(canvas, null, {
|
|
|
|
|
|
|
|
width: width,
|
|
|
|
|
|
|
|
height: height
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
this.setOption(Chart)
|
|
|
|
|
|
|
|
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
|
|
|
|
|
|
|
return Chart;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
setOption: function (Chart) {
|
|
|
|
|
|
|
|
Chart.clear(); // 清除
|
|
|
|
|
|
|
|
Chart.setOption(this.getOption()); //获取新数据
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 图表配置项
|
|
|
|
|
|
|
|
getOption() {
|
|
|
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
|
|
color: ["#FFF"], //图例图标颜色
|
|
|
|
// lineStyle:{//阴影
|
|
|
|
// shadowColor: '#6495F8',
|
|
|
|
// shadowBlur: 10
|
|
|
|
// },
|
|
|
|
xAxis: { //横坐标
|
|
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
|
|
name: '日期', //横坐标名称
|
|
|
|
|
|
|
|
nameTextStyle: { //在name值存在下，设置name的样式
|
|
|
|
|
|
|
|
color: '#333',
|
|
|
|
|
|
|
|
fontStyle: 'normal'
|
|
|
|
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
interval: 0,
|
|
|
|
},
|
|
|
|
boundaryGap: false, //1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上
|
|
|
|
|
|
|
|
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
fontSize: 13,
|
|
|
|
|
|
|
|
color: '#5D5D5D'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
yAxis: { //纵坐标
|
|
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
|
|
position: 'left',
|
|
|
|
|
|
|
|
name: '千瓦时', //纵坐标名称
|
|
|
|
|
|
|
|
nameTextStyle: { //在name值存在下，设置name的样式
|
|
|
|
|
|
|
|
color: '#333333',
|
|
|
|
|
|
|
|
fontStyle: 'normal'
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitNumber: 5, //坐标轴的分割段数
|
|
|
|
|
|
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
|
|
max: 500,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
|
|
data: [100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 253],
|
|
|
|
|
|
|
|
symbol: 'true',
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
color: '#6495F8'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
// areaStyle: {
|
|
|
|
// normal: {
|
|
|
|
// color: '#6495F8' //改变区域颜色
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return option;
|
|
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
|
*/
|
|
|
|
onReady: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面显示
|
|
|
|
*/
|
|
|
|
onShow: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
|
*/
|
|
|
|
onHide: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
|
*/
|
|
|
|
onUnload: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
|
*/
|
|
|
|
onPullDownRefresh: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
|
*/
|
|
|
|
onReachBottom: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 用户点击右上角分享
|
|
|
|
*/
|
|
|
|
onShareAppMessage: function () {
|
|
|
|
|
|
|
|
}
|
|
|
|
}) |
|
|
\ No newline at end of file |
...
|
...
|
|
