miniprogram / appui · 提交

转到一个项目

作者 刘晓艳
提交 d860a77063726c1e212ca873d51fecd589c93c14 1 个父辈 ceb266fc

企业用电3个页

内嵌 并排对比
正在显示 4 个修改的文件 包含 223 行增加 和 16 行删除
1 // pages/qiyeyongdian/detail/detail.js 1 // pages/qiyeyongdian/detail/detail.js
  2 +
  3 +import * as echarts from '../../../ec-canvas/echarts';
  4 +
  5 +const app = getApp();
  6 +var Chart = null;
2 Page({ 7 Page({
3 8
4 /** 9 /**
@@ -7,9 +12,31 @@ Page({ @@ -7,9 +12,31 @@ Page({
7 data: { 12 data: {
8 showModal: false, 13 showModal: false,
9 monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], 14 monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
10 - changeColor:-1, 15 + changeColor: -1,
  16 + ec: {
  17 +
  18 + onInit: function(canvas, width, height) {
  19 +
  20 + chart = echarts.init(canvas, null, {
  21 +
  22 + width: width,
  23 +
  24 + height: height
  25 +
  26 + });
  27 +
  28 + canvas.setChart(chart);
  29 +
  30 + return chart;
  31 +
  32 + },
  33 +
  34 + lazyLoad: true // 延迟加载
  35 +
  36 + },
  37 +
11 }, 38 },
12 - choice(e){ 39 + choice(e) {
13 let index = e.currentTarget.dataset.id; 40 let index = e.currentTarget.dataset.id;
14 this.setData({ 41 this.setData({
15 changeColor: index 42 changeColor: index
@@ -32,8 +59,161 @@ Page({ @@ -32,8 +59,161 @@ Page({
32 */ 59 */
33 onLoad: function(options) { 60 onLoad: function(options) {
34 61
  62 + this.echartsComponnet = this.selectComponent('#mychart');
  63 +
  64 + //如果是第一次绘制
  65 +
  66 + if (!Chart) {
  67 +
  68 + this.init_echarts(); //初始化图表
  69 +
  70 + } else {
  71 +
  72 + this.setOption(Chart); //更新数据
  73 +
  74 + }
  75 +
  76 + },
  77 + //初始化图表
  78 +
  79 + init_echarts: function() {
  80 +
  81 + this.echartsComponnet.init((canvas, width, height) => {
  82 +
  83 + // 初始化图表
  84 +
  85 + const Chart = echarts.init(canvas, null, {
  86 +
  87 + width: width,
  88 +
  89 + height: height
  90 +
  91 + });
  92 +
  93 + this.setOption(Chart)
  94 +
  95 + // 注意这里一定要返回 chart 实例，否则会影响事件处理等
  96 +
  97 + return Chart;
  98 +
  99 + });
  100 +
  101 + },
  102 +
  103 + setOption: function(Chart) {
  104 +
  105 + Chart.clear(); // 清除
  106 +
  107 + Chart.setOption(this.getOption()); //获取新数据
  108 +
  109 + },
  110 +
  111 + // 图表配置项
  112 +
  113 + getOption() {
  114 +
  115 + var self = this;
  116 +
  117 + var option = {
  118 +
  119 + color: ["#FFF"], //图例图标颜色
  120 + // lineStyle:{//阴影
  121 + // shadowColor: '#6495F8',
  122 + // shadowBlur: 10
  123 + // },
  124 + xAxis: { //横坐标
  125 +
  126 + type: 'category',
  127 +
  128 + name: '日期', //横坐标名称
  129 +
  130 + nameTextStyle: { //在name值存在下，设置name的样式
  131 +
  132 + color: '#333',
  133 +
  134 + fontStyle: 'normal'
  135 +
  136 + },
  137 + axisLabel: {
  138 + interval: 0,
  139 + },
  140 + boundaryGap: false, //1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上
  141 +
  142 + 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'],
  143 +
  144 + axisLabel: {
  145 +
  146 + textStyle: {
  147 +
  148 + fontSize: 13,
  149 +
  150 + color: '#5D5D5D'
  151 +
  152 + }
  153 +
  154 + }
  155 +
  156 + },
  157 +
  158 + yAxis: { //纵坐标
  159 +
  160 + type: 'value',
  161 +
  162 + position: 'left',
  163 +
  164 + name: '千瓦时', //纵坐标名称
  165 +
  166 + nameTextStyle: { //在name值存在下，设置name的样式
  167 +
  168 + color: '#333333',
  169 +
  170 + fontStyle: 'normal'
  171 +
35 }, 172 },
36 173
  174 + splitNumber: 5, //坐标轴的分割段数
  175 +
  176 +
  177 + min: 0,
  178 +
  179 + max: 500,
  180 +
  181 + },
  182 +
  183 + series: [{
  184 +
  185 + type: 'line',
  186 +
  187 + 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],
  188 +
  189 + symbol: 'true',
  190 +
  191 + itemStyle: {
  192 +
  193 + normal: {
  194 +
  195 + lineStyle: {
  196 +
  197 + color: '#6495F8'
  198 +
  199 + }
  200 +
  201 + }
  202 +
  203 + },
  204 + // areaStyle: {
  205 + // normal: {
  206 + // color: '#6495F8' //改变区域颜色
  207 + // }
  208 + // },
  209 +
  210 + }],
  211 +
  212 + }
  213 +
  214 + return option;
  215 +
  216 + },
37 /** 217 /**
38 * 生命周期函数--监听页面初次渲染完成 218 * 生命周期函数--监听页面初次渲染完成
39 */ 219 */
1 { 1 {
2 "navigationBarTextStyle": "black", 2 "navigationBarTextStyle": "black",
3 "navigationBarTitleText": "企业用电", 3 "navigationBarTitleText": "企业用电",
4 - "usingComponents": {} 4 + "usingComponents": {
  5 + "ec-canvas": "../../../ec-canvas/ec-canvas"
  6 + }
5 } 7 }
@@ -32,6 +32,11 @@ @@ -32,6 +32,11 @@
32 </view> 32 </view>
33 <!-- 折线图 --> 33 <!-- 折线图 -->
34 <view class="charts_line"> 34 <view class="charts_line">
  35 + <view class="chart">
  36 + <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
  37 +<!-- <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ec}}"></ec-canvas> -->
  38 + </view>
  39 +
35 <view class="total_power"> 40 <view class="total_power">
36 <view>当月：1788kw.h</view> 41 <view>当月：1788kw.h</view>
37 <view>累计：5898kw.h</view> 42 <view>累计：5898kw.h</view>
@@ -16,7 +16,9 @@ @@ -16,7 +16,9 @@
16 .left { 16 .left {
17 transform: rotate(180deg); 17 transform: rotate(180deg);
18 } 18 }
  19 +
19 /* 日期 */ 20 /* 日期 */
  21 +
20 .date_time { 22 .date_time {
21 color: #666; 23 color: #666;
22 font-size: 28rpx; 24 font-size: 28rpx;
@@ -24,13 +26,27 @@ @@ -24,13 +26,27 @@
24 flex-direction: row; 26 flex-direction: row;
25 align-items: center; 27 align-items: center;
26 } 28 }
27 -.down{  
28 - transform: rotate(90deg) 29 +
  30 +.down {
  31 + transform: rotate(90deg);
29 } 32 }
  33 +
30 /* 折线图 */ 34 /* 折线图 */
31 35
32 -.charts_line {  
33 - padding: 40rpx 13rpx; 36 +
  37 +
  38 +.chart {
  39 + width: 750rpx;
  40 + height: 394rpx;
  41 + margin: 0 auto;
  42 + display: flex;
  43 + justify-content: center;
  44 + align-items: center;
  45 +}
  46 +
  47 +ec-canvas {
  48 + width: 100%;
  49 + height: 100%;
34 } 50 }
35 51
36 .total_power { 52 .total_power {
@@ -105,38 +121,42 @@ @@ -105,38 +121,42 @@
105 color: #333; 121 color: #333;
106 line-height: 120rpx; 122 line-height: 120rpx;
107 } 123 }
108 -.change{  
109 - background-color: #FF9400; 124 +
  125 +.change {
  126 + background-color: #ff9400;
110 color: #fff; 127 color: #fff;
111 } 128 }
  129 +
112 .date_descript { 130 .date_descript {
113 width: 296rpx; 131 width: 296rpx;
114 height: 70rpx; 132 height: 70rpx;
115 line-height: 70rpx; 133 line-height: 70rpx;
116 text-align: center; 134 text-align: center;
117 - color: #FF9400; 135 + color: #ff9400;
118 font-size: 28rpx; 136 font-size: 28rpx;
119 - margin:0 auto; 137 + margin: 0 auto;
120 background: rgba(244, 244, 244, 1); 138 background: rgba(244, 244, 244, 1);
121 border-radius: 6rpx; 139 border-radius: 6rpx;
122 } 140 }
123 141
124 .btns { 142 .btns {
125 - margin-top:50rpx; 143 + margin-top: 50rpx;
126 display: flex; 144 display: flex;
127 flex-direction: row; 145 flex-direction: row;
128 align-items: center; 146 align-items: center;
129 border-top: 1rpx solid #f5f5f5; 147 border-top: 1rpx solid #f5f5f5;
130 } 148 }
131 -.cacle{  
132 - width:50%; 149 +
  150 +.cacle {
  151 + width: 50%;
133 color: #afafaf; 152 color: #afafaf;
134 height: 87rpx; 153 height: 87rpx;
135 line-height: 87rpx; 154 line-height: 87rpx;
136 text-align: center; 155 text-align: center;
137 font-size: 34rpx; 156 font-size: 34rpx;
138 } 157 }
139 -.sure{  
140 - color: #FF9400; 158 +
  159 +.sure {
  160 + color: #ff9400;
141 border-left: 1rpx solid #f5f5f5; 161 border-left: 1rpx solid #f5f5f5;
142 } 162 }