折线图优化

api/urls.js

@@ -1,4 +1,4 @@
-const host = 'https://m.fda.s-privacy.cn';
+const host = 'https://m.fda.sprivacy.cn';
 
 const urls ={
     hz:host + '/api/his/hz',

pages/index/index.js

@@ -3,182 +3,7 @@
 import * as echarts from '../../ec-canvas/echarts';
 var imageUtil = require('../../utils/window.js'); 
 const apiServer = require('../../api/request');
-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'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-          type: 'cross',
-          label: {
-              backgroundColor: '#6a7985'
-          }
-      }
-  },
-    renderAsImage: true, //支持渲染为图片模式
-    color: ["#DF3E3E", "#80CDF8"],//图例图标颜色
-    legend: {
-      show: true,
-      itemGap: 25,//每个图例间的间隔
-      top: 5,
-      x: 30,//水平安放位置,离容器左侧的距离  'left'
-      z: 100,
-      textStyle: {
-        color: '#383838'
-      },
-    },
-    grid: {//网格
-      left: "3%",
-      top:"8%",
-      right:"3%",
-      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.false 数据点在分割线上，即刻度值上
-      data: data.timeData,
-      axisLine: {onZero: true},
-      axisLabel: {
-        textStyle: {
-          fontSize: 13,
-          color: '#5D5D5D'
-        }
-      }
-    },
-    dataZoom: [
-      {
-        type: 'slider',
-        xAxisIndex: 0,
-        filterMode: 'empty',
-        startValue: data.prediction? data.prediction.length -9:0,
-        endValue: data.prediction?data.prediction.length:3 ,
-        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
-        handleSize: '80%',
-        handleStyle: {
-            color: '#fff',
-            shadowBlur: 3,
-            shadowColor: 'rgba(0, 0, 0, 0.6)',
-            shadowOffsetX: 2,
-            shadowOffsetY: 2
-        }
-    },
-    {
-      type: 'inside',
-      realtime: true,
-  }
-  ],
-    yAxis: {//纵坐标
-      type: 'value',
-      position:'right',
-      // nameTextStyle:{//在name值存在下，设置name的样式
-      //   color:'red',
-      //   fontStyle:'normal'
-      // },
-      splitNumber: 5,//坐标轴的分割段数
-      scale:true,
-      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: {
     url:'../../images/timg.jpg',
@@ -210,7 +35,7 @@ Page({
         // ]
       },
       ec: {
-        onInit: initChart,
+        onInit: true,
         // lazyLoad: true // 延迟加载
       },
     // ec: {
@@ -343,10 +168,17 @@ Page({
   getHz:function(){
     apiServer.getHz().then((res) =>{
       if(res.statusCode == 200){
-        console.log(res);
-          this.setData({
-            chartDatas:this.recursion(res.data.data),
-        })
+
+        this.onComponent.init((canvas, width, height,dpr) => {
+          // 初始化图表
+          const Chart = echarts.init(canvas, null, {
+            width: width,
+            height: height,
+            devicePixelRatio: dpr // new
+          });
+          Chart.setOption(this.getOption(this.recursion(res.data.data)));
+          return Chart;
+        });
       }
     })
   },
@@ -355,9 +187,16 @@ Page({
     apiServer.getSz().then((res) =>{
       if(res.statusCode == 200){
         console.log(res);
-          this.setData({
-            chartData:this.recursion(res.data.data),
-        })
+        this.deppComponnet.init((canvas, width, height,dpr) => {
+          // 初始化图表
+          const Chart = echarts.init(canvas, null, {
+            width: width,
+            height: height,
+            devicePixelRatio: dpr // new
+          });
+          Chart.setOption(this.getOption(this.recursion(res.data.data)));
+          return Chart;
+        });
       }
     })
   },
@@ -374,6 +213,258 @@ Page({
     }
   return {"timeData":a,"actual":b,"prediction":c,"color":d}
   },
+  getOption:function(data){
+    return {
+      title: {//标题
+        text: '',
+        left: 'center'
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross',
+            label: {
+                backgroundColor: '#6a7985'
+            }
+        }
+    },
+      renderAsImage: true, //支持渲染为图片模式
+  
+      color: [data.color, "#80CDF8"],//图例图标颜色
+  
+      legend: {
+  
+        show: true,
+  
+        itemGap: 25,//每个图例间的间隔
+  
+        // top: 30,
+  
+        x: 30,//水平安放位置,离容器左侧的距离  'left'
+  
+        z: 100,
+  
+        textStyle: {
+  
+          color: '#383838'
+        },
+  
+      },
+  
+      grid: {//网格
+       top:"8%",
+        left: "2%",
+        right:"2%",
+        containLabel: true,//grid 区域是否包含坐标轴的刻度标签
+      },
+  
+      xAxis: {//横坐标
+  
+        type: 'category',
+  
+        // nameTextStyle: {//在name值存在下，设置name的样式
+  
+        //   color: 'white',
+  
+        //   fontStyle: 'normal'
+  
+        // },
+        // splitNumber: 7,//坐标轴的分割段数
+        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',
+          startValue: data.prediction? data.prediction.length -4:0,
+          endValue: data.prediction?data.prediction.length:3 ,
+          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+          handleSize: '80%',
+          handleStyle: {
+              color: '#fff',
+              shadowBlur: 3,
+              shadowColor: 'rgba(0, 0, 0, 0.6)',
+              shadowOffsetX: 2,
+              shadowOffsetY: 2
+          }
+      },
+      {
+        type: 'inside',
+        realtime: true
+    }
+  
+    ],
+      yAxis: {//纵坐标
+  
+        type: 'value',
+  
+        position:'right',
+  
+        // nameTextStyle:{//在name值存在下，设置name的样式
+  
+        //   color:'red',
+  
+        //   fontStyle:'normal'
+  
+        // },
+  
+        splitNumber: 5,//坐标轴的分割段数
+        scale:true,
+        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: data.color
+        }, {
+            offset: 1,
+            color: '#1C1C1C'
+        }])
+  
+        },
+        itemStyle: {
+  
+          normal: {
+  
+            lineStyle: {
+  
+              color: data.color
+  
+            }
+  
+          }
+  
+        }
+  
+      }, {
+  
+        name: '预测',
+  
+        type: 'line',
+  
+        data: data.prediction,
+  
+        symbol: 'none',
+  
+        itemStyle: {
+  
+          normal: {
+  
+            lineStyle: {
+  
+              color: '#80CDF8'
+  
+            }
+  
+          }
+  
+        }
+  
+      }],
+    };
+  },
   onReady: function (e) {
     this.computeScrollViewHeight();
     // var query = wx.createSelectorQuery()
@@ -382,6 +473,8 @@ Page({
     // }).exec();
  },
   onLoad: function (options) {
+    this.onComponent = this.selectComponent('#mychart-dom-line-on');
+    this.deppComponnet = this.selectComponent('#mychart-dom-line-depp');
     this.getHz();
     this.getSz();
     getNewsList(this);
@@ -526,185 +619,8 @@ Page({
     catchTouchMove:function(res){
       return false
     },
-  //初始化图表
-  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 = { 
-       title: {//标题 
-         text: '', 
-         left: 'center' 
-       }, 
-       tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'cross',
-            label: {
-                backgroundColor: '#6a7985'
-            }
-        }
-    },
-       renderAsImage: true, //支持渲染为图片模式 
-       color: ["#DF3E3E", "#80CDF8"],//图例图标颜色 
-       legend: { 
-        //  left:'right',
-         show: true, 
-         itemGap: 25,//每个图例间的间隔 
-         top: 20, 
-         right:20,
-         x: 100,//水平安放位置,离容器左侧的距离  'left' 
-         z: 100, 
-         textStyle: { 
-           color: '#383838'
-         }, 
-         data: [//图例具体内容 
-           { 
-             name: '实际', 
-             textStyle: { 
-               fontSize: 13, 
-               color: 'white' 
-             },
-             icon: 'line'
-           }, 
-           { 
-             name: '预测', 
-             textStyle: {
-               fontSize: 13, 
-               color: 'white'
-             }, 
-             icon: 'line',
-           } 
-         ] 
-       }, 
-       grid: {//网格 
-        //  left: 50, 
-        //  top:100, 
-         containLabel: true,//grid 区域是否包含坐标轴的刻度标签 
-       }, 
-       xAxis: {//横坐标
-         type: 'category',
-        //  name: '区间',//横坐标名称
-         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: ['2020/6/29', '2020/6/30', '2020/7/1', '2020/7/2', '2020/7/3'],
-         axisLine: {onZero: true},
-         axisLabel: {
-             textStyle: {
-             fontSize: 13,
-             color: '#5D5D5D'
-           }
-         }
-       },
-       yAxis: {//纵坐标
-         type: 'value',
-         position:'right',
-         name: '股票值',//纵坐标名称
-         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('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,
-       },
-       series: [{
-         name: '实际',
-         type: 'line',
-        //  smooth:true,
-         data: [1888, 3666, 6555, 3000, 7888, 4000, 3333],
-         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: [1000, 3000, 3111, 5000, 4000, 2000, 1000],
-         symbol: 'none',
-         itemStyle: {
-           normal: {
-             lineStyle: {
-               color: '#80CDF8'
-             }
-           }
-         }
-       }],
-     }
-     return option;
-   },
+
+
   getUserInfo: function(e) {
     console.log(e)
     app.globalData.userInfo = e.detail.userInfo

pages/index/index.wxml

@@ -40,11 +40,11 @@
     <swiper current="{{currentTab}}" class="swiper-box" duration="300"  style="height:700rpx;background:#1C1C1C" bindchange="bindChange">
     <swiper-item catchtouchmove='catchTouchMove'>
      <view style="width:100%;height:100%">
-       <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" tuData="{{ chartDatas }}" ec="{{ ec }}"></ec-canvas>
+       <ec-canvas  id="mychart-dom-line-on" canvas-id="mychart-line-on" tuData="{{ chartDatas }}" ec="{{ ec }}"></ec-canvas>
      </view>
     </swiper-item>
     <swiper-item catchtouchmove='catchTouchMove'>
-      <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" tuData="{{ chartData }}" ec="{{ ec }}"></ec-canvas>
+      <ec-canvas  id="mychart-dom-line-depp" canvas-id="mychart-line-depp" tuData="{{ chartData }}" ec="{{ ec }}"></ec-canvas>
     </swiper-item>
    </swiper>
         <!-- <view class="middleCharts">

pages/index/index.wxss

@@ -4,6 +4,7 @@
   color:white;
   /* height:500rpx; */
   width:100%;
+  padding: 10px;
   /* position:fixed;
   top:100rpx;
   left:0;

project.config.json

@@ -4,7 +4,7 @@
 		"ignore": []
 	},
 	"setting": {
-		"urlCheck": false,
+		"urlCheck": true,
 		"es6": true,
 		"enhance": false,
 		"postcss": true,
@@ -20,15 +20,15 @@
 		"checkInvalidKey": true,
 		"checkSiteMap": true,
 		"uploadWithSourceMap": true,
+		"compileHotReLoad": false,
 		"babelSetting": {
 			"ignore": [],
 			"disablePlugins": [],
 			"outputPath": ""
 		},
+		"useIsolateContext": true,
 		"useCompilerModule": true,
-		"userConfirmedUseCompilerModuleSwitch": false,
-		"compileHotReLoad": false,
-		"useIsolateContext": true
+		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",
 	"libVersion": "2.11.1",

utils/api.js

@@ -1,6 +1,6 @@
 
 var wxRequest = require('wxRequest.js') 
-var HOST_URI = 'https://m.fda.s-privacy.cn';
+var HOST_URI = 'https://m.fda.sprivacy.cn';
 module.exports = {  
   // 获取涨幅上周实际
   getinclast: function (obj) {