|
|
@@ -4,6 +4,153 @@ import * as echarts from '../../ec-canvas/echarts';
|
|
|
var imageUtil = require('../../utils/window.js');
|
|
|
var Chart=null;
|
|
|
const app = getApp()
|
|
|
+var timeData = [
|
|
|
+ '2020/6/1', '2009/6/2', '2009/6/3', '2009/6/4', '2009/6/5', '2009/6/6', '2009/6/7', '2009/6/8', '2009/6/9', '2009/6/10',
|
|
|
+];
|
|
|
+
|
|
|
+timeData = timeData.map(function (str) {
|
|
|
+ return str.replace('2009/', '');
|
|
|
+});
|
|
|
+function initChart(canvas, width, height, dpr, data) {
|
|
|
+ const chart = echarts.init(canvas, null, {
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
+ devicePixelRatio: dpr // new
|
|
|
+ });
|
|
|
+ canvas.setChart(chart);
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ title: {//标题
|
|
|
+ text: '',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ renderAsImage: true, //支持渲染为图片模式
|
|
|
+ color: ["#DF3E3E", "#80CDF8"],//图例图标颜色
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ itemGap: 25,//每个图例间的间隔
|
|
|
+ top: 30,
|
|
|
+ x: 30,//水平安放位置,离容器左侧的距离 'left'
|
|
|
+ z: 100,
|
|
|
+ textStyle: {
|
|
|
+ color: '#383838'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {//网格
|
|
|
+ // left: 30,
|
|
|
+ // top:100,
|
|
|
+ containLabel: true,//grid 区域是否包含坐标轴的刻度标签
|
|
|
+ },
|
|
|
+ xAxis: {//横坐标
|
|
|
+ type: 'category',
|
|
|
+ // nameTextStyle: {//在name值存在下，设置name的样式
|
|
|
+ // color: 'white',
|
|
|
+ // fontStyle: 'normal'
|
|
|
+ // },
|
|
|
+ nameLocation:'end',
|
|
|
+ splitLine: {//坐标轴在 grid 区域中的分隔线。
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: ['#2B2B2B']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ boundaryGap: false,//1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上
|
|
|
+ data: data.timeData,
|
|
|
+ axisLine: {onZero: true},
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ color: '#5D5D5D'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ xAxisIndex: 0,
|
|
|
+ filterMode: 'empty'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: {//纵坐标
|
|
|
+ type: 'value',
|
|
|
+ position:'right',
|
|
|
+ // nameTextStyle:{//在name值存在下，设置name的样式
|
|
|
+ // color:'red',
|
|
|
+ // fontStyle:'normal'
|
|
|
+ // },
|
|
|
+ splitNumber: 5,//坐标轴的分割段数
|
|
|
+ splitLine: {//坐标轴在 grid 区域中的分隔线。
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: ['#2B2B2B']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {//坐标轴刻度标签
|
|
|
+ // formatter: function (value) {
|
|
|
+ // var xLable = [];
|
|
|
+ // if (value == 20) {
|
|
|
+ // xLable.push('25,883');
|
|
|
+ // }
|
|
|
+ // if (value == 40) {
|
|
|
+ // xLable.push('26,035');
|
|
|
+ // }
|
|
|
+ // if (value == 60) {
|
|
|
+ // xLable.push('26,187');
|
|
|
+ // }
|
|
|
+ // if (value == 80) {
|
|
|
+ // xLable.push('26,339');
|
|
|
+ // }
|
|
|
+ // return xLable
|
|
|
+ // },
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ color: '#5D5D5D',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // min: 0,
|
|
|
+ // max: 100,
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '实际',
|
|
|
+ type: 'line',
|
|
|
+ // smooth:true,
|
|
|
+ data:data.actual,
|
|
|
+ symbol: 'none',
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#DF3E3E'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#1C1C1C'
|
|
|
+ }])
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#DF3E3E'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '预测',
|
|
|
+ type: 'line',
|
|
|
+ data: data.prediction,
|
|
|
+ symbol: 'none',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#80CDF8'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ };
|
|
|
+ chart.setOption(option);
|
|
|
+ return chart;
|
|
|
+}
|
|
|
|
|
|
Page({
|
|
|
data: {
|
|
|
@@ -15,17 +162,35 @@ Page({
|
|
|
canIUse: wx.canIUse('button.open-type.getUserInfo'),
|
|
|
imagewidth: 0,//缩放后的宽
|
|
|
imageheight: 0,//缩放后的高
|
|
|
- ec: {
|
|
|
- onInit: function (canvas, width, height) {
|
|
|
- chart = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height
|
|
|
- });
|
|
|
- canvas.setChart(chart);
|
|
|
- return chart;
|
|
|
- },
|
|
|
- lazyLoad: true // 延迟加载
|
|
|
+ chartData:{
|
|
|
+ actual:[552,586,3555,4454,552,556,4455],
|
|
|
+ prediction:[552,546,3585,4424,542,546,35,44,524,56,355,444,2224,421],
|
|
|
+ timeData : [
|
|
|
+ '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7', '2020/6/8', '2020/6/9', '2020/6/10','2020/6/11',
|
|
|
+ '2020/6/12','2020/6/13','2020/6/14',
|
|
|
+ ]
|
|
|
},
|
|
|
+ chartDatas:{
|
|
|
+ actual:[572,556,3555,4744,552,576,3555],
|
|
|
+ prediction:[352,246,385,2424,542,546,255],
|
|
|
+ timeData : [
|
|
|
+ '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ec: {
|
|
|
+ onInit: initChart
|
|
|
+ },
|
|
|
+ // ec: {
|
|
|
+ // onInit: function (canvas, width, height) {
|
|
|
+ // chart = echarts.init(canvas, null, {
|
|
|
+ // width: width,
|
|
|
+ // height: height
|
|
|
+ // });
|
|
|
+ // canvas.setChart(chart);
|
|
|
+ // return chart;
|
|
|
+ // },
|
|
|
+ // lazyLoad: true // 延迟加载
|
|
|
+ // },
|
|
|
aa:[
|
|
|
{
|
|
|
id:'0',
|
|
|
@@ -133,7 +298,6 @@ Page({
|
|
|
time:"5天前"
|
|
|
},
|
|
|
],
|
|
|
-
|
|
|
},
|
|
|
//事件处理函数
|
|
|
bindViewTap: function() {
|
|
|
@@ -163,14 +327,15 @@ Page({
|
|
|
this.setData({
|
|
|
height:height
|
|
|
})
|
|
|
- this.echartsComponnet = this.selectComponent('#mychart');
|
|
|
- console.log(this.echartsComponnet);
|
|
|
- //如果是第一次绘制
|
|
|
- if (!Chart) {
|
|
|
- this.init_echarts(); //初始化图表
|
|
|
- } else {
|
|
|
- this.setOption(Chart); //更新数据
|
|
|
- }
|
|
|
+ // this.echartsComponnet = this.selectComponent('#mychart');
|
|
|
+ // console.log(this.echartsComponnet);
|
|
|
+ // //如果是第一次绘制
|
|
|
+ // if (!Chart) {
|
|
|
+ // this.init_echarts(); //初始化图表
|
|
|
+ // } else {
|
|
|
+ // this.setOption(Chart); //更新数据
|
|
|
+ // }
|
|
|
+
|
|
|
// this.computeScrollViewHeight();
|
|
|
// if (app.globalData.userInfo) {
|
|
|
// this.setData({
|
|
|
@@ -241,12 +406,21 @@ Page({
|
|
|
if (this.data.currentTab === e.target.dataset.current) {
|
|
|
return false;
|
|
|
} else {
|
|
|
- that.init_echarts();
|
|
|
that.setData({
|
|
|
currentTab: e.target.dataset.current
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
+ // 滑动切换tab
|
|
|
+ bindChange: function(e) {
|
|
|
+ var that = this;
|
|
|
+ that.setData({
|
|
|
+ currentTab: e.detail.current
|
|
|
+ });
|
|
|
+ },
|
|
|
+ catchTouchMove:function(res){
|
|
|
+ return false
|
|
|
+ },
|
|
|
//初始化图表
|
|
|
init_echarts: function () {
|
|
|
this.echartsComponnet.init((canvas, width, height) => {
|
|
|
@@ -306,13 +480,13 @@ Page({
|
|
|
]
|
|
|
},
|
|
|
grid: {//网格
|
|
|
- left: 30,
|
|
|
- top:100,
|
|
|
+ // left: 50,
|
|
|
+ // top:100,
|
|
|
containLabel: true,//grid 区域是否包含坐标轴的刻度标签
|
|
|
},
|
|
|
xAxis: {//横坐标
|
|
|
type: 'category',
|
|
|
- name: '区间',//横坐标名称
|
|
|
+ // name: '区间',//横坐标名称
|
|
|
nameTextStyle: {//在name值存在下，设置name的样式
|
|
|
color: 'white',
|
|
|
fontStyle: 'normal'
|
|
|
@@ -321,11 +495,13 @@ Page({
|
|
|
splitLine: {//坐标轴在 grid 区域中的分隔线。
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- type: 'dashed'
|
|
|
+ type: 'dashed',
|
|
|
+ color: ['#2B2B2B']
|
|
|
}
|
|
|
},
|
|
|
boundaryGap: false,//1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上
|
|
|
- data: ['10', '11', '12', '13', '14', '15', '16'],
|
|
|
+ data: ['2020/6/29', '2020/6/30', '2020/7/1', '2020/7/2', '2020/7/3'],
|
|
|
+ axisLine: {onZero: true},
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
fontSize: 13,
|
|
|
@@ -345,39 +521,40 @@ Page({
|
|
|
splitLine: {//坐标轴在 grid 区域中的分隔线。
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- type: 'dashed'
|
|
|
+ type: 'dashed',
|
|
|
+ color: ['#2B2B2B']
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {//坐标轴刻度标签
|
|
|
- formatter: function (value) {
|
|
|
- var xLable = [];
|
|
|
- if (value == 20) {
|
|
|
- xLable.push('25,883');
|
|
|
- }
|
|
|
- if (value == 40) {
|
|
|
- xLable.push('26,035');
|
|
|
- }
|
|
|
- if (value == 60) {
|
|
|
- xLable.push('26,187');
|
|
|
- }
|
|
|
- if (value == 80) {
|
|
|
- xLable.push('26,339');
|
|
|
- }
|
|
|
- return xLable
|
|
|
- },
|
|
|
+ // formatter: function (value) {
|
|
|
+ // var xLable = [];
|
|
|
+ // if (value == 20) {
|
|
|
+ // xLable.push('1000');
|
|
|
+ // }
|
|
|
+ // if (value == 40) {
|
|
|
+ // xLable.push('2000');
|
|
|
+ // }
|
|
|
+ // if (value == 60) {
|
|
|
+ // xLable.push('4000');
|
|
|
+ // }
|
|
|
+ // if (value == 80) {
|
|
|
+ // xLable.push('6000');
|
|
|
+ // }
|
|
|
+ // return xLable
|
|
|
+ // },
|
|
|
textStyle: {
|
|
|
fontSize: 13,
|
|
|
color: '#5D5D5D',
|
|
|
}
|
|
|
},
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
+ // min: 0,
|
|
|
+ // max: 100,
|
|
|
},
|
|
|
series: [{
|
|
|
name: '实际',
|
|
|
type: 'line',
|
|
|
// smooth:true,
|
|
|
- data: [18, 36, 65, 30, 78, 40, 33],
|
|
|
+ data: [1888, 3666, 6555, 3000, 7888, 4000, 3333],
|
|
|
symbol: 'none',
|
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
@@ -401,7 +578,7 @@ Page({
|
|
|
}, {
|
|
|
name: '预测',
|
|
|
type: 'line',
|
|
|
- data: [10, 30, 31, 50, 40, 20, 10],
|
|
|
+ data: [1000, 3000, 3111, 5000, 4000, 2000, 1000],
|
|
|
symbol: 'none',
|
|
|
itemStyle: {
|
|
|
normal: {
|
lx