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/latticeBar.vue | 482 +++++++++++++++++++++++++++--------------------------
1 files changed, 247 insertions(+), 235 deletions(-)
diff --git a/src/components/charts/latticeBar.vue b/src/components/charts/latticeBar.vue
index d56de0a..30400a0 100644
--- a/src/components/charts/latticeBar.vue
+++ b/src/components/charts/latticeBar.vue
@@ -1,246 +1,258 @@
<template>
- <div class="echarts-wrapper">
- <div class="echarts-content" ref="chart">
+ <div class="echarts-wrapper" @click="toParentPage">
+ <div class="echarts-content" ref="chart">
- </div>
- </div>
+ </div>
+ </div>
</template>
<script>
- import * as echarts from 'echarts';
- import {
- chartFontsize
- } from '@/assets/js/chartFontsize'
- import {
- chargeAnalysis
- } from '@/assets/js/api'
- export default {
- name: "latticeBar",
- chart: "",
- chartData: {},
- props: {
- id: {
- require: true,
- type: String,
- default: "",
- },
- },
- data() {
- return {
+import * as echarts from 'echarts';
+import {
+ chartFontsize
+} from '@/assets/js/chartFontsize'
+import {
+ chargeAnalysis
+} from '@/assets/js/api'
+export default {
+ name: "latticeBar",
+ chart: "",
+ chartData: {},
+ props: {
+ id: {
+ require: true,
+ type: String,
+ default: "",
+ },
+ },
+ data() {
+ return {
- }
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- organizeData(data) {
- let option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- formatter: function (item) {
- let str = item[0].axisValueLabel + '<br />';
- item.map(jtem => {
- if (jtem.seriesName !== 'bg') {
- str += jtem.seriesName + ': ' + jtem.data + '<br />'
- }
- });
- return str
- }
- },
- legend: {
- top: '2%',
- itemWidth: chartFontsize(18),
- itemHeight: chartFontsize(12),
- textStyle: {
- color: '#ffffff',
- fontSize: chartFontsize(14),
- },
- data: ['璁块棶閲�', '璁㈠崟閲�']
- },
- grid: {
- top: 40,
- right: 20,
- left: 50,
- bottom: 30
- },
- xAxis: [{
- type: 'category',
- data: [],
- axisLine: {
- lineStyle: {
- color: '#007ed3'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#FFFFFF',
- fontSize: chartFontsize(14),
- interval: 0
- }
- }],
- yAxis: [{
- max: 200,
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#007ed3'
- }
- },
- axisLabel: {
- color: '#FFFFFF',
- fontSize: chartFontsize(14),
- },
- }],
- series: []
- };
- let max;
- data.series.map(item => {
- max = item.data[0];
- item.data.map(jtem => {
- if (jtem > max) {
- max = jtem;
- }
- })
- });
- option.yAxis[0].max = max;
- option.xAxis[0].data = data.xData;
- let legendData = [];
- data.series.map(item => {
- legendData.push(item.name);
- })
- option.legend.data = legendData;
- for (let i = 0; i < data.series.length; i++) {
- let maxArr = [];
- data.series[i].data.map(() => {
- maxArr.push(max)
- })
- let plusMinus = (i % 2);
- let offset;
- if (plusMinus == 0) {
- offset = '-65%'
- } else if (plusMinus == 1) {
- offset = '65%'
- }
- option.series.push({
- name: data.series[i].name,
- type: 'pictorialBar',
- symbol: 'roundRect',
- itemStyle: {
- color: data.series[i].color
- },
- symbolRepeat: true,
- symbolSize: ["16%", "4%"],
- symbolMargin: 2,
- symbolPosition: 'start',
- symbolOffset: [offset, 0],
- z: -20,
- data: data.series[i].data,
- });
- option.series.push({
- name: 'bg',
- type: 'pictorialBar',
- symbol: 'roundRect',
- itemStyle: {
- color: '#052b6c'
- },
- symbolRepeat: true,
- symbolSize: ["16%", "4%"],
- symbolMargin: 2,
- symbolPosition: 'start',
- symbolOffset: [offset, 0],
- z: -30,
- data: maxArr
- });
- }
- // 璁剧疆閰嶇疆椤�
- this.setOption(option);
- },
- setData(sendData) {
- if (sendData) {
- this.$options.chartData = sendData;
- this.organizeData(sendData)
- } else {
- this.postData()
- setInterval(() => {
- this.postData()
- }, 3000)
- }
- },
- postData() {
- let userId = localStorage.getItem('userId');
- let params = {
- userId: userId
- }
- chargeAnalysis(params).then((res) => {
- if (res.data.code == 1) {
- let optionData = {
- xData: [],
- series: [{
- name: '鏀剧數',
- data: [],
- color: '#90ec7d'
- }, {
- name: '鍏呯數',
- data: [],
- color: '#ff6b6b'
- }]
- }
- let resData = res.data.data;
- for (let key in resData.reCharge) {
- if (typeof resData.reCharge[key] == 'string') {
- optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
- } else {
- optionData.series[0].data.push(resData.reCharge[key])
- }
- }
- for (let key in resData.disCharge) {
- optionData.xData.push(key)
- if (typeof resData.disCharge[key] == 'string') {
- optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
- } else {
- optionData.series[1].data.push(resData.disCharge[key])
- }
- }
- this.$options.chartData = optionData;
- this.organizeData(optionData)
- }
- }).catch((err) => {
- console.log(err)
- });
- },
- resize() {
- setTimeout(() => {
- this.$options.chart.resize();
- if (JSON.stringify(this.$options.chartData) != '{}') {
- this.setData(this.$options.chartData);
- }
- }, 300)
- }
- },
- mounted() {
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.chart = echarts.init(this.$refs.chart);
+ }
+ },
+ methods: {
+ toParentPage() {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "鐢垫睜瀹炴椂鍛婅",
+ name: "batteryrTimequery",
+ src: "#/batteryrTimequery",
+ closable: true
+ },
+ }
+ }, "*");
+ },
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ organizeData(data) {
+ let option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ formatter: function (item) {
+ let str = item[0].axisValueLabel + '<br />';
+ item.map(jtem => {
+ if (jtem.seriesName !== 'bg') {
+ str += jtem.seriesName + ': ' + jtem.data + '<br />'
+ }
+ });
+ return str
+ }
+ },
+ legend: {
+ top: '2%',
+ itemWidth: chartFontsize(18),
+ itemHeight: chartFontsize(12),
+ textStyle: {
+ color: '#ffffff',
+ fontSize: chartFontsize(14),
+ },
+ data: ['璁块棶閲�', '璁㈠崟閲�']
+ },
+ grid: {
+ top: 40,
+ right: 20,
+ left: 50,
+ bottom: 30
+ },
+ xAxis: [{
+ type: 'category',
+ data: [],
+ axisLine: {
+ lineStyle: {
+ color: '#007ed3'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#FFFFFF',
+ fontSize: chartFontsize(14),
+ interval: 0
+ }
+ }],
+ yAxis: [{
+ max: 200,
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#007ed3'
+ }
+ },
+ axisLabel: {
+ color: '#FFFFFF',
+ fontSize: chartFontsize(14),
+ },
+ }],
+ series: []
+ };
+ let max;
+ data.series.map(item => {
+ max = item.data[0];
+ item.data.map(jtem => {
+ if (jtem > max) {
+ max = jtem;
+ }
+ })
+ });
+ option.yAxis[0].max = max;
+ option.xAxis[0].data = data.xData;
+ let legendData = [];
+ data.series.map(item => {
+ legendData.push(item.name);
+ })
+ option.legend.data = legendData;
+ for (let i = 0; i < data.series.length; i++) {
+ let maxArr = [];
+ data.series[i].data.map(() => {
+ maxArr.push(max)
+ })
+ let plusMinus = (i % 2);
+ let offset;
+ if (plusMinus == 0) {
+ offset = '-65%'
+ } else if (plusMinus == 1) {
+ offset = '65%'
+ }
+ option.series.push({
+ name: data.series[i].name,
+ type: 'pictorialBar',
+ symbol: 'roundRect',
+ itemStyle: {
+ color: data.series[i].color
+ },
+ symbolRepeat: true,
+ symbolSize: ["16%", "4%"],
+ symbolMargin: 2,
+ symbolPosition: 'start',
+ symbolOffset: [offset, 0],
+ z: -20,
+ data: data.series[i].data,
+ });
+ option.series.push({
+ name: 'bg',
+ type: 'pictorialBar',
+ symbol: 'roundRect',
+ itemStyle: {
+ color: '#052b6c'
+ },
+ symbolRepeat: true,
+ symbolSize: ["16%", "4%"],
+ symbolMargin: 2,
+ symbolPosition: 'start',
+ symbolOffset: [offset, 0],
+ z: -30,
+ data: maxArr
+ });
+ }
+ // 璁剧疆閰嶇疆椤�
+ this.setOption(option);
+ },
+ setData(sendData) {
+ if (sendData) {
+ this.$options.chartData = sendData;
+ this.organizeData(sendData)
+ } else {
+ this.postData()
+ setInterval(() => {
+ this.postData()
+ }, 3000)
+ }
+ },
+ postData() {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ chargeAnalysis(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ xData: [],
+ series: [{
+ name: '鏀剧數',
+ data: [],
+ color: '#90ec7d'
+ }, {
+ name: '鍏呯數',
+ data: [],
+ color: '#ff6b6b'
+ }]
+ }
+ let resData = res.data.data;
+ for (let key in resData.reCharge) {
+ if (typeof resData.reCharge[key] == 'string') {
+ optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
+ } else {
+ optionData.series[0].data.push(resData.reCharge[key])
+ }
+ }
+ for (let key in resData.disCharge) {
+ optionData.xData.push(key)
+ if (typeof resData.disCharge[key] == 'string') {
+ optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
+ } else {
+ optionData.series[1].data.push(resData.disCharge[key])
+ }
+ }
+ this.$options.chartData = optionData;
+ this.organizeData(optionData)
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ },
+ resize() {
+ setTimeout(() => {
+ this.$options.chart.resize();
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
+ }
+ }, 300)
+ }
+ },
+ mounted() {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ this.$options.chart = echarts.init(this.$refs.chart);
- window.addEventListener('resize', this.resize);
- },
- destroyed() {
- window.removeEventListener('resize', this.resize);
- }
- }
+ 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