企业用电3个页

 // pages/qiyeyongdian/detail/detail.js
+
+import * as echarts from '../../../ec-canvas/echarts';
+
+const app = getApp();
+var Chart = null;
 Page({
 
   /**
@@ -7,9 +12,31 @@ Page({
   data: {
     showModal: false,
     monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
-    changeColor:-1,
+    changeColor: -1,
+    ec: {
+
+      onInit: function(canvas, width, height) {
+
+        chart = echarts.init(canvas, null, {
+
+          width: width,
+
+          height: height
+
+        });
+
+        canvas.setChart(chart);
+
+        return chart;
+
+      },
+
+      lazyLoad: true // 延迟加载
+
+    },
+
   },
-  choice(e){
+  choice(e) {
     let index = e.currentTarget.dataset.id;
     this.setData({
       changeColor: index
@@ -32,8 +59,161 @@ Page({
    */
   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;
+
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

 {
   "navigationBarTextStyle": "black",
   "navigationBarTitleText": "企业用电",
-  "usingComponents": {}
+  "usingComponents": {
+    "ec-canvas": "../../../ec-canvas/ec-canvas"
+  }
 }
\ No newline at end of file

@@ -32,6 +32,11 @@
 </view>
 <!-- 折线图 -->
 <view class="charts_line">
+  <view class="chart">
+    <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
+<!-- <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ec}}"></ec-canvas> -->
+  </view>
+
   <view class="total_power">
     <view>当月：1788kw.h</view>
     <view>累计：5898kw.h</view>

@@ -16,7 +16,9 @@
 .left {
   transform: rotate(180deg);
 }
+
 /* 日期 */
+
 .date_time {
   color: #666;
   font-size: 28rpx;
@@ -24,13 +26,27 @@
   flex-direction: row;
   align-items: center;
 }
-.down{
-  transform: rotate(90deg)
+
+.down {
+  transform: rotate(90deg);
 }
+
 /* 折线图 */
 
-.charts_line {
-  padding: 40rpx 13rpx;
+
+
+.chart {
+  width: 750rpx;
+  height: 394rpx;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+ec-canvas {
+  width: 100%;
+  height: 100%;
 }
 
 .total_power {
@@ -105,38 +121,42 @@
   color: #333;
   line-height: 120rpx;
 }
-.change{
-  background-color: #FF9400;
+
+.change {
+  background-color: #ff9400;
   color: #fff;
 }
+
 .date_descript {
   width: 296rpx;
   height: 70rpx;
   line-height: 70rpx;
   text-align: center;
-  color: #FF9400;
+  color: #ff9400;
   font-size: 28rpx;
-  margin:0 auto;
+  margin: 0 auto;
   background: rgba(244, 244, 244, 1);
   border-radius: 6rpx;
 }
 
 .btns {
-  margin-top:50rpx;
+  margin-top: 50rpx;
   display: flex;
   flex-direction: row;
   align-items: center;
   border-top: 1rpx solid #f5f5f5;
 }
-.cacle{
-  width:50%;
+
+.cacle {
+  width: 50%;
   color: #afafaf;
   height: 87rpx;
   line-height: 87rpx;
   text-align: center;
   font-size: 34rpx;
 }
-.sure{
-  color: #FF9400;
+
+.sure {
+  color: #ff9400;
   border-left: 1rpx solid #f5f5f5;
 }