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/PictorialBar.vue | 364 ++++++++++++++++++++++++++-------------------------
1 files changed, 188 insertions(+), 176 deletions(-)
diff --git a/src/components/charts/PictorialBar.vue b/src/components/charts/PictorialBar.vue
index 94ac491..2a18cac 100644
--- a/src/components/charts/PictorialBar.vue
+++ b/src/components/charts/PictorialBar.vue
@@ -1,188 +1,200 @@
<template>
- <div class="echarts-wrapper">
- <div class="echarts-content" ref="chart"></div>
- </div>
+ <div class="echarts-wrapper" @click="toParentPage">
+ <div class="echarts-content" ref="chart"></div>
+ </div>
</template>
<script>
- import * as echarts from "echarts";
- import {
- onlinegroupVolAnalysis
- } from '@/assets/js/api'
- export default {
- name: "PictorialBar",
- chart: "",
- chartData: {},
- props: {
- id: {
- type: String,
- default: ""
- }
- },
- data() {
- return {}
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- organizeData(data) {
- let option = {
- grid: {
- top: 40,
- right: 20,
- left: 50,
- bottom: 30
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- },
- legend: {
- data: ['鍦ㄧ嚎鐢靛帇', '缁勭鐢靛帇'],
- top: '4%',
- right: '8%',
- icon: 'rect',
- textStyle: {
- color: '#fff',
- }
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- color: '#fff',
- interval: 0,
- },
- axisLine: {
- lineStyle: {
- color: "#007DD140",
- }
- },
- data: data.xData,
- },
- yAxis: {
- splitLine: {
- lineStyle: {
- color: '#007DD140',
- type: 'dashed',
- }
- }
- },
- series: []
- };
+import * as echarts from "echarts";
+import {
+ onlinegroupVolAnalysis
+} from '@/assets/js/api'
+export default {
+ name: "PictorialBar",
+ chart: "",
+ chartData: {},
+ props: {
+ id: {
+ type: String,
+ default: ""
+ }
+ },
+ data() {
+ return {}
+ },
+ 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 = {
+ grid: {
+ top: 40,
+ right: 20,
+ left: 50,
+ bottom: 30
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ },
+ legend: {
+ data: ['鍦ㄧ嚎鐢靛帇', '缁勭鐢靛帇'],
+ top: '4%',
+ right: '8%',
+ icon: 'rect',
+ textStyle: {
+ color: '#fff',
+ }
+ },
+ xAxis: {
+ type: 'category',
+ axisLabel: {
+ color: '#fff',
+ interval: 0,
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#007DD140",
+ }
+ },
+ data: data.xData,
+ },
+ yAxis: {
+ splitLine: {
+ lineStyle: {
+ color: '#007DD140',
+ type: 'dashed',
+ }
+ }
+ },
+ series: []
+ };
- data.series.map((item) => {
- option.series.push({
- name: item.name,
- type: "pictorialBar",
- symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
- itemStyle: {
- color: item.color
- },
- data: item.data
- })
- })
+ data.series.map((item) => {
+ option.series.push({
+ name: item.name,
+ type: "pictorialBar",
+ symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+ itemStyle: {
+ color: item.color
+ },
+ data: item.data
+ })
+ })
- option.series[1]['barGap'] = '-1%'
+ option.series[1]['barGap'] = '-1%'
- // 璁剧疆閰嶇疆椤�
- 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
- }
- onlinegroupVolAnalysis(params).then((res) => {
- if (res.data.code == 1) {
- let optionData = {
- xData: [],
- series: [{
- name: "鍦ㄧ嚎鐢靛帇",
- data: [],
- color: '#E85D22'
- },
- {
- name: "缁勭鐢靛帇",
- data: [],
- color: '#2EEA9D'
- }
- ]
- }
- let resData = res.data.data;
- for (let key in resData) {
- let seriesData = resData[key]
- if (key == '鍦ㄧ嚎鐢靛帇') {
- for (let jey in seriesData) {
- if (typeof seriesData[jey] == 'string') {
- optionData.series[0].data.push({
- name: jey,
- value: Number(seriesData[jey].split('%')[0])
- })
- } else {
- optionData.series[0].data.push({
- name: jey,
- value: seriesData[jey]
- })
- }
- }
- } else if (key == '缁勭鐢靛帇') {
- for (let jey in seriesData) {
- if (typeof seriesData[jey] == 'string') {
- optionData.series[1].data.push({
- name: jey,
- value: Number(seriesData[jey].split('%')[0])
- })
- } else {
- optionData.series[1].data.push({
- name: jey,
- value: seriesData[jey]
- })
- }
- }
- }
- }
- 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);
+ // 璁剧疆閰嶇疆椤�
+ 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
+ }
+ onlinegroupVolAnalysis(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ xData: [],
+ series: [{
+ name: "鍦ㄧ嚎鐢靛帇",
+ data: [],
+ color: '#E85D22'
+ },
+ {
+ name: "缁勭鐢靛帇",
+ data: [],
+ color: '#2EEA9D'
+ }
+ ]
+ }
+ let resData = res.data.data;
+ for (let key in resData) {
+ let seriesData = resData[key]
+ if (key == '鍦ㄧ嚎鐢靛帇') {
+ for (let jey in seriesData) {
+ if (typeof seriesData[jey] == 'string') {
+ optionData.series[0].data.push({
+ name: jey,
+ value: Number(seriesData[jey].split('%')[0])
+ })
+ } else {
+ optionData.series[0].data.push({
+ name: jey,
+ value: seriesData[jey]
+ })
+ }
+ }
+ } else if (key == '缁勭鐢靛帇') {
+ for (let jey in seriesData) {
+ if (typeof seriesData[jey] == 'string') {
+ optionData.series[1].data.push({
+ name: jey,
+ value: Number(seriesData[jey].split('%')[0])
+ })
+ } else {
+ optionData.series[1].data.push({
+ name: jey,
+ value: seriesData[jey]
+ })
+ }
+ }
+ }
+ }
+ 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