|
|
|
// pages/qiyeyongdian/detail/detail.js
|
|
|
|
|
|
|
|
import * as echarts from '../../ec-canvas/echarts';
|
|
|
|
|
|
|
|
const app = getApp();
|
|
|
|
var Chart = null;
|
|
|
|
Page({
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 页面的初始数据
|
|
|
|
*/
|
|
|
|
data: {
|
|
|
|
showModal: false,
|
|
|
|
modalTitle: ["选择时间", "选择地磅", "选择货物"],
|
|
|
|
modalNum: 2,
|
|
|
|
monthList: ["货物名字", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", ],
|
|
|
|
time: '2019.01.01-2019.01.31',
|
|
|
|
changeColor: 0,
|
|
|
|
tabList: ["出库", "流水"],
|
|
|
|
tabNum: 0,
|
|
|
|
tableTitle: ["时间", "地磅", "货物名称", "重量（T）"],
|
|
|
|
trList: [{
|
|
|
|
date: "09.12",
|
|
|
|
position: "大厅左上角",
|
|
|
|
name: "名字妙哉妙",
|
|
|
|
num: "18",
|
|
|
|
btn: "详情"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
date: "09.12",
|
|
|
|
position: "大厅左上角",
|
|
|
|
name: "啦啦啦啦啦啦啦啦啦啦",
|
|
|
|
num: "18",
|
|
|
|
btn: "详情"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
date: "09.12",
|
|
|
|
position: "车间后方大转盘",
|
|
|
|
name: "啦啦啦啦啦啦啦啦啦啦",
|
|
|
|
num: "18",
|
|
|
|
btn: "详情"
|
|
|
|
},
|
|
|
|
],
|
|
|
|
ec: {
|
|
|
|
|
|
|
|
onInit: function(canvas, width, height) {
|
|
|
|
|
|
|
|
chart = echarts.init(canvas, null, {
|
|
|
|
|
|
|
|
width: width,
|
|
|
|
|
|
|
|
height: height
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
canvas.setChart(chart);
|
|
|
|
|
|
|
|
return chart;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
lazyLoad: true, // 延迟加载
|
|
|
|
showt: false
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
changeTab(e) {
|
|
|
|
this.setData({
|
|
|
|
tabNum: e.currentTarget.dataset.id
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
toShowModal(e) {
|
|
|
|
this.setData({
|
|
|
|
showModal: true
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
hideModal() {
|
|
|
|
this.setData({
|
|
|
|
showModal: false
|
|
|
|
});
|
|
|
|
},
|
|
|
|
choice(e) {
|
|
|
|
|
|
|
|
this.setData({
|
|
|
|
changeColor: e.currentTarget.dataset.id
|
|
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面加载
|
|
|
|
*/
|
|
|
|
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: 10, //坐标轴的分割段数
|
|
|
|
|
|
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
|
|
max: 100,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
|
|
data: [10, 12, 13, 14, 23, 31, 23, 31, 48, 43, 1, 100, 23, 42, 21, 31, 23, 34, 97, 43, 59, 67, 82, 42, 23, 31, 13, 34, 34, 43, 25],
|
|
|
|
|
|
|
|
symbol: 'true',
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
color: '#ED3676'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
// areaStyle: {
|
|
|
|
// normal: {
|
|
|
|
// color: '#6495F8' //改变区域颜色
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return option;
|
|
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
|
*/
|
|
|
|
onReady: function() {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面显示
|
|
|
|
*/
|
|
|
|
onShow: function() {
|
|
|
|
this.echartsComponnet = this.selectComponent('#mychart');
|
|
|
|
|
|
|
|
|
|
|
|
//如果是第一次绘制
|
|
|
|
|
|
|
|
if (!Chart) {
|
|
|
|
this.init_echarts(); //初始化图表
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setOption(Chart); //更新数据
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
|
*/
|
|
|
|
onHide: function() {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
|
*/
|
|
|
|
onUnload: function() {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
|
*/
|
|
|
|
onPullDownRefresh: function() {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
|
*/
|
|
|
|
onReachBottom: function() {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 用户点击右上角分享
|
|
|
|
*/
|
|
|
|
onShareAppMessage: function() {
|
|
|
|
|
|
|
|
}
|
|
|
|
}) |
|
|
\ No newline at end of file |
...
|
...
|
|
