From c04569e75ef0c526f7f08169cc5724c83005d250 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期四, 30 九月 2021 20:11:39 +0800
Subject: [PATCH] 地图组件及图表模块跳转方法添加
---
src/components/charts/dischargeCircuit.vue | 1022 ++++++++++++++++++++++++++++----------------------------
1 files changed, 517 insertions(+), 505 deletions(-)
diff --git a/src/components/charts/dischargeCircuit.vue b/src/components/charts/dischargeCircuit.vue
index 9fe1088..34b1626 100644
--- a/src/components/charts/dischargeCircuit.vue
+++ b/src/components/charts/dischargeCircuit.vue
@@ -1,520 +1,532 @@
<template>
- <div class="echarts-wrapper">
- <div class="echarts-content" ref="dischargeCircuit">
+ <div class="echarts-wrapper" @click="toParentPage">
+ <div class="echarts-content" ref="dischargeCircuit">
- </div>
- </div>
+ </div>
+ </div>
</template>
<script>
import * as echarts from 'echarts';
// 鏀剧數鐢垫祦 椤甸潰
export default {
- name: "dischargeCircuit",
- chart: "",
- chartData: {},
- props: {
- id: {
- require: true,
- type: String,
- default: "",
- },
- name: {
- type: String,
- default: ""
- },
- top: {
- type: Number,
- default: 15,
- },
- bottom: {
- type: Number,
- default: 60
- },
- space: {
- type: Number,
- default: 4
- },
- },
- data() {
- return {
- userId:""
- }
- },
- methods: {
- setOption(opt) {
- this.$options.discharge.setOption(opt);
- },
- setData(dataList) {
- let self = this;
- let xAxisData = [];//['浣庡憡璀︽暟閲�', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鏁版瘮渚�', '鍛婅鎬绘暟','鍛婅鎬绘暟姣斾緥']
- let maxYAxis = [];
- let xData =[];
- let data = [];
- // 瀛樺��
- self.$options.chartData = dataList;
- if(!dataList){
- self.$axios({
- method:"get",
- url:"/batteryAlarm/dischargeAnalysis",
- params:{
- userId:self.userId
- }
+ name: "dischargeCircuit",
+ chart: "",
+ chartData: {},
+ props: {
+ id: {
+ require: true,
+ type: String,
+ default: "",
+ },
+ name: {
+ type: String,
+ default: ""
+ },
+ top: {
+ type: Number,
+ default: 15,
+ },
+ bottom: {
+ type: Number,
+ default: 60
+ },
+ space: {
+ type: Number,
+ default: 4
+ },
+ },
+ data() {
+ return {
+ userId: ""
+ }
+ },
+ methods: {
+ toParentPage() {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "鐢垫睜瀹炴椂鍛婅",
+ name: "batteryrTimequery",
+ src: "#/batteryrTimequery",
+ closable: true
+ },
+ }
+ }, "*");
+ },
+ setOption(opt) {
+ this.$options.discharge.setOption(opt);
+ },
+ setData(dataList) {
+ let self = this;
+ let xAxisData = [];//['浣庡憡璀︽暟閲�', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鏁版瘮渚�', '鍛婅鎬绘暟','鍛婅鎬绘暟姣斾緥']
+ let maxYAxis = [];
+ let xData = [];
+ let data = [];
+ // 瀛樺��
+ self.$options.chartData = dataList;
+ if (!dataList) {
+ self.$axios({
+ method: "get",
+ url: "/batteryAlarm/dischargeAnalysis",
+ params: {
+ userId: self.userId
+ }
- }).then(res=>{
- if(res.data.code == 1){
- let result = res.data.data;
- for (const key in result) {
- xAxisData.push(key);
- xData.push(result[key]);
- if(typeof(result[key]) == 'string'){
- data.push(parseFloat(result[key].replace(/%/g,"")));
- }else{
- data.push(result[key]);
- }
- }
- let maxInt = Math.max.apply(null,data) + 100;
- data.forEach(() => {
- maxYAxis.push(maxInt);
- });
- self.optionSet(xAxisData,maxYAxis,xData,data);
- console.log(xAxisData,data)
- }
- })
- }else{
- self.optionSet(dataList.xAxisData,dataList.maxYAxis,dataList.xData,dataList.data);
- }
-
- },
- // 鑾峰彇瀵瑰簲鏁版嵁
- getArrValue(value){
- let test = 0;
- if(value == "鍛婅鎬绘暟姣斾緥" || value == "鍛婅鏈烘埧鏁版瘮渚�"){
- test = 1;
- }
- return test;
- },
- // 鍥捐〃閰嶇疆
- optionSet(xAxisData,maxYAxis,xData,data){
- let self = this;
- var option = {
- grid: {
- left: '15%',
- right: '15%',
- bottom: '10%',
- top: '17%',
- z: 22
- },
- xAxis: [
- {
- //宸︿晶鏌辩姸鍥剧殑x杞� 涓媂杞�
- type: 'category',
- gridIndex: 0,//y杞存墍鍦ㄧ殑 grid 鐨勭储寮�
- // boundaryGap: false,
- splitLine: 'none',
- axisTick: 'none',
- axisLine: {
- show:true,
- lineStyle: {
- width:2,
- color: 'rgba(117,103,244,1)',
- }
- },
- axisLabel: {
- // verticalAlign: 'bottom',
- align: 'center',
- textStyle: {
- color: '#FFFFFF',
- fontSize: '12'
- }
- },
- data: xAxisData,//['浣庡憡璀︽暟閲�', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鏁版瘮渚�', '鍛婅鎬绘暟','鍛婅鎬绘暟姣斾緥'],
- // inverse: true, //鍙嶈浆
- },
- {
- // 宸︿晶鏌辩姸鍥剧殑Y杞� 涓奨杞�
- gridIndex: 0,//y杞存墍鍦ㄧ殑 grid 鐨勭储寮�
- splitLine: 'none',
- axisTick: 'none',
- axisLine: {
- show:false
- },
- axisLabel:{
- color:function (params,index) {
- let colorList = [
- "#EB6F49",
- "#757EFA",
- "#1A6AEF",
- "#67E0E3",
- "#FED601"
- ];
- return colorList[index];
- },
- },
- // inverse: true, //鍙嶈浆
- data: xData//[555,444,333,222,666],
- },
- ],
- yAxis: [
- {
- //鍧愭爣杞� 宸杞�
- type: 'value',
- // name: '鏁板��',
- min: 0,
- max: maxYAxis[0],
- // interval: 300,
- axisLine: {
- show: false,
- // y鍧愭爣绾挎牱寮�
- lineStyle:{
- width:3
- },
- // y鍧愭爣鏂囧瓧鏍峰紡
- itemStyle:{
- width:3,
- color:"#ffffff"
- }
-
- },
- //鍧愭爣鍊兼爣娉�
- axisLabel: {
- show: true,
- textStyle: {
- color: '#ffffff',
- }
- },
- //鍒嗘牸绾�
- splitLine: {
- show:false,
- lineStyle: {
- color: '#000'
- }
- }
- },
- {//鍙砓杞�
- type: 'value',
- // name: '姣斾緥',
- min: 0,
- max: 100,
- // interval: 10,
- axisLabel: {
- formatter: '{value} %'
- },
- //鍒嗘牸绾�
- splitLine: {
- show:false,
- lineStyle: {
- color: '#000'
- }
- }
- }
- ],
- series: [
- // 浣庡憡璀︽暟閲�
- {
- name: xAxisData[0],
- type: 'bar',
- xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
- yAxisIndex: self.getArrValue(xAxisData[0]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [data[0],0,0,0,0],
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(220,58,123,1)', 'rgba(234,167,116,1)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- barBorderRadius:6
- },
- },
- z: 2
- },
- // 鍛婅鎬绘暟
- {
- name: xAxisData[1],
- type: 'bar',
- // xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
- yAxisIndex: self.getArrValue(xAxisData[1]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [0,data[1],0,0,0],
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(117,103,244,1)', 'rgba(156,178,255,1)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- barBorderRadius:6
- },
- },
- z: 2
- },
- // 鍛婅鎬绘暟姣斾緥
- {
- name: xAxisData[2],
- type: 'bar',
- // xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
- yAxisIndex: self.getArrValue(xAxisData[2]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [0,0,data[2],0,0],
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(0,55,236,1)', 'rgba(0,123,196,1)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- barBorderRadius:6
- },
- },
- z: 2
- },
- // 鍛婅鏈烘埧鎬绘暟
- {
- name: xAxisData[3],
- type: 'bar',
- xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
- yAxisIndex:self.getArrValue(xAxisData[3]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [0,0,0,data[3],0],
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- barBorderRadius:6
- },
- },
- z: 2
- },
- // 鍛婅鏈烘埧鏁版瘮渚�
- {
- name: xAxisData[4],
- type: 'bar',
- xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
- yAxisIndex: self.getArrValue(xAxisData[4]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [0,0,0,0,data[4]],
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- barBorderRadius:6
- },
- },
- z: 2
- },
- // 澶栨
- {
- name: '澶栨',
- type: 'bar',
- xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
- yAxisIndex: 0,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- barGap: '-1',
- data: maxYAxis,//[1800,1800, 1800,1800,1800],
- barWidth: 15,
- itemStyle: {
- normal: {
- color: 'rgba(255, 255, 255, 0.15)',
- barBorderRadius: 6,
- }
- },
- z: 0
- },
- // 浣庡憡璀︽暟閲�
- {
- name: xAxisData[0],
- type: 'pictorialBar',
- // symbol: '../../assets/logo copy.png',
- symbolSize: [30,-30],
- yAxisIndex: self.getArrValue(xAxisData[0]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- z: 12,
- data: [{
- value: data[0],
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- }]
- },
- // 鍛婅鎬绘暟
- {
- name: xAxisData[1],
- type: 'pictorialBar',
- // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
- symbolSize: [30,-30],
- yAxisIndex: self.getArrValue(xAxisData[1]),
- color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- z: 12,
- data: [{
- value: 0,
- symbolPosition: 'end'
- },{
- value: data[1],
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- }]
- },
- // 鍛婅鎬绘暟姣斾緥
- {
- name: xAxisData[2],
- type: 'pictorialBar',
- yAxisIndex: self.getArrValue(xAxisData[2]),
- // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
- symbolSize: [30,-30],
- color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- z: 12,
- data: [{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: data[2],
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- }]
- },
- // 鍛婅鏈烘埧鎬绘暟
- {
- name: xAxisData[3],
- type: 'pictorialBar',
- yAxisIndex: self.getArrValue(xAxisData[3]),
- // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
- symbolSize: [30,-30],
- color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- z: 12,
- data: [{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: data[3],
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- }]
- },
- // 鍛婅鏈烘埧鏁版瘮渚�
- {
- name: xAxisData[4],
- yAxisIndex: self.getArrValue(xAxisData[4]),
- type: 'pictorialBar',
- // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
- symbolSize: [30,-30],
- color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- 'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
- ].map((color, offset) => ({
- color,
- offset
- }))),
- z: 12,
- data: [{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: 0,
- symbolPosition: 'end'
- },{
- value: data[4],
- symbolPosition: 'end'
- }]
- },
-
-
- ]
- };
- this.setOption(option);
- },
- resize() {
- let self = this;
- setTimeout(function(){
- self.$options.discharge.resize();
- self.setData(self.$options.chartData);
- })
- }
- },
- mounted() {
- // 鑾峰彇userId
- this.userId = localStorage.getItem("userId");
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.discharge = echarts.init(this.$refs.dischargeCircuit);
+ }).then(res => {
+ if (res.data.code == 1) {
+ let result = res.data.data;
+ for (const key in result) {
+ xAxisData.push(key);
+ xData.push(result[key]);
+ if (typeof (result[key]) == 'string') {
+ data.push(parseFloat(result[key].replace(/%/g, "")));
+ } else {
+ data.push(result[key]);
+ }
+ }
+ let maxInt = Math.max.apply(null, data) + 100;
+ data.forEach(() => {
+ maxYAxis.push(maxInt);
+ });
+ self.optionSet(xAxisData, maxYAxis, xData, data);
+ console.log(xAxisData, data)
+ }
+ })
+ } else {
+ self.optionSet(dataList.xAxisData, dataList.maxYAxis, dataList.xData, dataList.data);
+ }
- window.addEventListener('resize', this.resize);
- },
- destroyed() {
- window.removeEventListener('resize', this.resize);
- }
+ },
+ // 鑾峰彇瀵瑰簲鏁版嵁
+ getArrValue(value) {
+ let test = 0;
+ if (value == "鍛婅鎬绘暟姣斾緥" || value == "鍛婅鏈烘埧鏁版瘮渚�") {
+ test = 1;
+ }
+ return test;
+ },
+ // 鍥捐〃閰嶇疆
+ optionSet(xAxisData, maxYAxis, xData, data) {
+ let self = this;
+ var option = {
+ grid: {
+ left: '15%',
+ right: '15%',
+ bottom: '10%',
+ top: '17%',
+ z: 22
+ },
+ xAxis: [
+ {
+ //宸︿晶鏌辩姸鍥剧殑x杞� 涓媂杞�
+ type: 'category',
+ gridIndex: 0,//y杞存墍鍦ㄧ殑 grid 鐨勭储寮�
+ // boundaryGap: false,
+ splitLine: 'none',
+ axisTick: 'none',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 2,
+ color: 'rgba(117,103,244,1)',
+ }
+ },
+ axisLabel: {
+ // verticalAlign: 'bottom',
+ align: 'center',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: '12'
+ }
+ },
+ data: xAxisData,//['浣庡憡璀︽暟閲�', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鏁版瘮渚�', '鍛婅鎬绘暟','鍛婅鎬绘暟姣斾緥'],
+ // inverse: true, //鍙嶈浆
+ },
+ {
+ // 宸︿晶鏌辩姸鍥剧殑Y杞� 涓奨杞�
+ gridIndex: 0,//y杞存墍鍦ㄧ殑 grid 鐨勭储寮�
+ splitLine: 'none',
+ axisTick: 'none',
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ color: function (params, index) {
+ let colorList = [
+ "#EB6F49",
+ "#757EFA",
+ "#1A6AEF",
+ "#67E0E3",
+ "#FED601"
+ ];
+ return colorList[index];
+ },
+ },
+ // inverse: true, //鍙嶈浆
+ data: xData//[555,444,333,222,666],
+ },
+ ],
+ yAxis: [
+ {
+ //鍧愭爣杞� 宸杞�
+ type: 'value',
+ // name: '鏁板��',
+ min: 0,
+ max: maxYAxis[0],
+ // interval: 300,
+ axisLine: {
+ show: false,
+ // y鍧愭爣绾挎牱寮�
+ lineStyle: {
+ width: 3
+ },
+ // y鍧愭爣鏂囧瓧鏍峰紡
+ itemStyle: {
+ width: 3,
+ color: "#ffffff"
+ }
+
+ },
+ //鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#ffffff',
+ }
+ },
+ //鍒嗘牸绾�
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#000'
+ }
+ }
+ },
+ {//鍙砓杞�
+ type: 'value',
+ // name: '姣斾緥',
+ min: 0,
+ max: 100,
+ // interval: 10,
+ axisLabel: {
+ formatter: '{value} %'
+ },
+ //鍒嗘牸绾�
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#000'
+ }
+ }
+ }
+ ],
+ series: [
+ // 浣庡憡璀︽暟閲�
+ {
+ name: xAxisData[0],
+ type: 'bar',
+ xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
+ yAxisIndex: self.getArrValue(xAxisData[0]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ data: [data[0], 0, 0, 0, 0],
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(220,58,123,1)', 'rgba(234,167,116,1)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ barBorderRadius: 6
+ },
+ },
+ z: 2
+ },
+ // 鍛婅鎬绘暟
+ {
+ name: xAxisData[1],
+ type: 'bar',
+ // xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
+ yAxisIndex: self.getArrValue(xAxisData[1]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ data: [0, data[1], 0, 0, 0],
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(117,103,244,1)', 'rgba(156,178,255,1)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ barBorderRadius: 6
+ },
+ },
+ z: 2
+ },
+ // 鍛婅鎬绘暟姣斾緥
+ {
+ name: xAxisData[2],
+ type: 'bar',
+ // xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
+ yAxisIndex: self.getArrValue(xAxisData[2]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ data: [0, 0, data[2], 0, 0],
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(0,55,236,1)', 'rgba(0,123,196,1)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ barBorderRadius: 6
+ },
+ },
+ z: 2
+ },
+ // 鍛婅鏈烘埧鎬绘暟
+ {
+ name: xAxisData[3],
+ type: 'bar',
+ xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
+ yAxisIndex: self.getArrValue(xAxisData[3]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ data: [0, 0, 0, data[3], 0],
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ barBorderRadius: 6
+ },
+ },
+ z: 2
+ },
+ // 鍛婅鏈烘埧鏁版瘮渚�
+ {
+ name: xAxisData[4],
+ type: 'bar',
+ xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
+ yAxisIndex: self.getArrValue(xAxisData[4]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ data: [0, 0, 0, 0, data[4]],
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ barBorderRadius: 6
+ },
+ },
+ z: 2
+ },
+ // 澶栨
+ {
+ name: '澶栨',
+ type: 'bar',
+ xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
+ yAxisIndex: 0,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ barGap: '-1',
+ data: maxYAxis,//[1800,1800, 1800,1800,1800],
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: 'rgba(255, 255, 255, 0.15)',
+ barBorderRadius: 6,
+ }
+ },
+ z: 0
+ },
+ // 浣庡憡璀︽暟閲�
+ {
+ name: xAxisData[0],
+ type: 'pictorialBar',
+ // symbol: '../../assets/logo copy.png',
+ symbolSize: [30, -30],
+ yAxisIndex: self.getArrValue(xAxisData[0]),//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ z: 12,
+ data: [{
+ value: data[0],
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }]
+ },
+ // 鍛婅鎬绘暟
+ {
+ name: xAxisData[1],
+ type: 'pictorialBar',
+ // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ symbolSize: [30, -30],
+ yAxisIndex: self.getArrValue(xAxisData[1]),
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ z: 12,
+ data: [{
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: data[1],
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }]
+ },
+ // 鍛婅鎬绘暟姣斾緥
+ {
+ name: xAxisData[2],
+ type: 'pictorialBar',
+ yAxisIndex: self.getArrValue(xAxisData[2]),
+ // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ symbolSize: [30, -30],
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ z: 12,
+ data: [{
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: data[2],
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }]
+ },
+ // 鍛婅鏈烘埧鎬绘暟
+ {
+ name: xAxisData[3],
+ type: 'pictorialBar',
+ yAxisIndex: self.getArrValue(xAxisData[3]),
+ // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ symbolSize: [30, -30],
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ z: 12,
+ data: [{
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: data[3],
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }]
+ },
+ // 鍛婅鏈烘埧鏁版瘮渚�
+ {
+ name: xAxisData[4],
+ yAxisIndex: self.getArrValue(xAxisData[4]),
+ type: 'pictorialBar',
+ // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ symbolSize: [30, -30],
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ 'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
+ ].map((color, offset) => ({
+ color,
+ offset
+ }))),
+ z: 12,
+ data: [{
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: 0,
+ symbolPosition: 'end'
+ }, {
+ value: data[4],
+ symbolPosition: 'end'
+ }]
+ },
+
+
+ ]
+ };
+ this.setOption(option);
+ },
+ resize() {
+ let self = this;
+ setTimeout(function () {
+ self.$options.discharge.resize();
+ self.setData(self.$options.chartData);
+ })
+ }
+ },
+ mounted() {
+ // 鑾峰彇userId
+ this.userId = localStorage.getItem("userId");
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ this.$options.discharge = echarts.init(this.$refs.dischargeCircuit);
+
+ window.addEventListener('resize', this.resize);
+ },
+ destroyed() {
+ window.removeEventListener('resize', this.resize);
+ }
}
</script>
<style scoped>
-
</style>
\ No newline at end of file
--
Gitblit v1.9.1