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/monomerVoltage.vue | 402 +++++++++++++++++++++++++++++---------------------------
1 files changed, 207 insertions(+), 195 deletions(-)
diff --git a/src/components/charts/monomerVoltage.vue b/src/components/charts/monomerVoltage.vue
index a250326..442703b 100644
--- a/src/components/charts/monomerVoltage.vue
+++ b/src/components/charts/monomerVoltage.vue
@@ -1,209 +1,221 @@
<template>
- <div class="echarts-wrapper">
- <div class="echarts-content" ref="monomerVoltage">
+ <div class="echarts-wrapper" @click="toParentPage">
+ <div class="echarts-content" ref="monomerVoltage">
- </div>
- </div>
+ </div>
+ </div>
</template>
<script>
import * as echarts from 'echarts';
// 鍗曚綋鐢靛帇銆佸唴闃诲拰娓╁害 椤甸潰
export default {
- name: "monomerVoltage",
- 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.chart.setOption(opt);
- },
- setData(dataList) {
- let self = this;
- let legendData = [];
- let yAxisData = [];
- let data = [];
- // 瀛樺��
- self.$options.chartData = dataList;
- if(!dataList){
- self.$axios({
- method:"get",
- url:"/batteryAlarm/monVRTAnalysis",
- params:{
- userId:self.userId
- }
- }).then(res=>{
- if(res.data.code == 1){
- let result = res.data.data;
- let index = 0;
- for (const key in result) {
- let obj = {
- name: key,
- type: 'bar',
- data:[]
- }
- legendData.push(key);
- for (const item in result[key]) {
- if(index === 0){
- yAxisData.push(item);
- }
- obj.data.push(result[key][item])
- }
- data.push(obj);
- index++;
- }
- self.optionSet(legendData,yAxisData,data);
- }
- })
- }else{
- self.optionSet(dataList.legendData,dataList.yAxisData,dataList.data);
- }
- },
- optionSet(legendData,yAxisData,data){
- let option = {
- // title: {
- // text: '涓栫晫浜哄彛鎬婚噺',
- // subtext: '鏁版嵁鏉ヨ嚜缃戠粶'
- // },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- right:"4%",
- data: legendData,//['鍗曚綋鐢靛帇', '鍗曚綋鍐呴樆','鍗曚綋娓╁害'],
- itemStyle:{
- right:"0",
- },
- textStyle:{
- color:"#fff"
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'value',
- //鍧愭爣鍊兼爣娉�
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- }
- },
- //鍒嗘牸绾�
- splitLine: {
- show:true,
- lineStyle: {
- color: '#254389'
- }
- },
- boundaryGap: [0, 0.01]
- },
- yAxis: {
- type: 'category',
- //鍧愭爣杞�
- axisLine: {
- lineStyle:{
- color:"#254389"
- }
- },
- //鍧愭爣鍊兼爣娉�
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- }
- },
-
-
- data: yAxisData,//['楂樺憡璀︽暟閲�', '浣庡憡璀︽暟閲�', '鍛婅鎬绘暟', '鍛婅鎬绘暟姣斾緥', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鎬绘暟姣斾緥']
- },
- series: data
- // [
- // {
- // name: '鍗曚綋鐢靛帇',
- // type: 'bar',
- // data: [24, 18, 38, 31, 24, 13],
- // itemStyle:{
- // color:'#FED601'
- // }
- // },
- // {
- // name: '鍗曚綋鍐呴樆',
- // type: 'bar',
- // data: [19, 28, 46, 24, 14, 9],
- // itemStyle:{
- // color:'#67E0E3'
- // }
- // },
- // {
- // name: '鍗曚綋娓╁害',
- // type: 'bar',
- // data: [15, 22, 36, 15, 21, 8],
- // itemStyle:{
- // color:'#EB6F49'
- // }
- // }
- // ]
- };
- this.setOption(option);
- },
- resize() {
- let self = this;
- setTimeout(function(){
- self.$options.chart.resize();
- self.setData(self.$options.chartData);
- },300)
-
- }
- },
- mounted() {
- // 鑾峰彇userId
- this.userId = localStorage.getItem("userId");
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.chart = echarts.init(this.$refs.monomerVoltage);
+ name: "monomerVoltage",
+ 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.chart.setOption(opt);
+ },
+ setData(dataList) {
+ let self = this;
+ let legendData = [];
+ let yAxisData = [];
+ let data = [];
+ // 瀛樺��
+ self.$options.chartData = dataList;
+ if (!dataList) {
+ self.$axios({
+ method: "get",
+ url: "/batteryAlarm/monVRTAnalysis",
+ params: {
+ userId: self.userId
+ }
+ }).then(res => {
+ if (res.data.code == 1) {
+ let result = res.data.data;
+ let index = 0;
+ for (const key in result) {
+ let obj = {
+ name: key,
+ type: 'bar',
+ data: []
+ }
+ legendData.push(key);
+ for (const item in result[key]) {
+ if (index === 0) {
+ yAxisData.push(item);
+ }
+ obj.data.push(result[key][item])
+ }
+ data.push(obj);
+ index++;
+ }
+ self.optionSet(legendData, yAxisData, data);
+ }
+ })
+ } else {
+ self.optionSet(dataList.legendData, dataList.yAxisData, dataList.data);
+ }
+ },
+ optionSet(legendData, yAxisData, data) {
+ let option = {
+ // title: {
+ // text: '涓栫晫浜哄彛鎬婚噺',
+ // subtext: '鏁版嵁鏉ヨ嚜缃戠粶'
+ // },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ right: "4%",
+ data: legendData,//['鍗曚綋鐢靛帇', '鍗曚綋鍐呴樆','鍗曚綋娓╁害'],
+ itemStyle: {
+ right: "0",
+ },
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ //鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ }
+ },
+ //鍒嗘牸绾�
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#254389'
+ }
+ },
+ boundaryGap: [0, 0.01]
+ },
+ yAxis: {
+ type: 'category',
+ //鍧愭爣杞�
+ axisLine: {
+ lineStyle: {
+ color: "#254389"
+ }
+ },
+ //鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ }
+ },
- window.addEventListener('resize', this.resize);
- },
- destroyed() {
- window.removeEventListener('resize', this.resize);
- }
+
+ data: yAxisData,//['楂樺憡璀︽暟閲�', '浣庡憡璀︽暟閲�', '鍛婅鎬绘暟', '鍛婅鎬绘暟姣斾緥', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鎬绘暟姣斾緥']
+ },
+ series: data
+ // [
+ // {
+ // name: '鍗曚綋鐢靛帇',
+ // type: 'bar',
+ // data: [24, 18, 38, 31, 24, 13],
+ // itemStyle:{
+ // color:'#FED601'
+ // }
+ // },
+ // {
+ // name: '鍗曚綋鍐呴樆',
+ // type: 'bar',
+ // data: [19, 28, 46, 24, 14, 9],
+ // itemStyle:{
+ // color:'#67E0E3'
+ // }
+ // },
+ // {
+ // name: '鍗曚綋娓╁害',
+ // type: 'bar',
+ // data: [15, 22, 36, 15, 21, 8],
+ // itemStyle:{
+ // color:'#EB6F49'
+ // }
+ // }
+ // ]
+ };
+ this.setOption(option);
+ },
+ resize() {
+ let self = this;
+ setTimeout(function () {
+ self.$options.chart.resize();
+ self.setData(self.$options.chartData);
+ }, 300)
+
+ }
+ },
+ mounted() {
+ // 鑾峰彇userId
+ this.userId = localStorage.getItem("userId");
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ this.$options.chart = echarts.init(this.$refs.monomerVoltage);
+
+ 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