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/triangleBarChart.vue | 444 ++++++++++++++++++++++++++++---------------------------
1 files changed, 228 insertions(+), 216 deletions(-)
diff --git a/src/components/charts/triangleBarChart.vue b/src/components/charts/triangleBarChart.vue
index af3604b..97c5aaa 100644
--- a/src/components/charts/triangleBarChart.vue
+++ b/src/components/charts/triangleBarChart.vue
@@ -1,227 +1,239 @@
<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';
- //寮曞叆chart瀛椾綋鑷�傚簲
- import {
- chartFontsize
- } from '@/assets/js/chartFontsize'
- import {
- batteryGroup
- } from '@/assets/js/api'
- export default {
- name: "triangleBarChart",
- chart: "",
- chartData: {},
- props: {
- id: {
- require: true,
- type: String,
- default: "",
- },
- },
- data() {
- return {
+import * as echarts from 'echarts';
+//寮曞叆chart瀛椾綋鑷�傚簲
+import {
+ chartFontsize
+} from '@/assets/js/chartFontsize'
+import {
+ batteryGroup
+} from '@/assets/js/api'
+export default {
+ name: "triangleBarChart",
+ chart: "",
+ chartData: {},
+ props: {
+ id: {
+ require: true,
+ type: String,
+ default: "",
+ },
+ },
+ data() {
+ return {
- }
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- organizeData(data) {
- let inData = []
- data.data.map(item => {
- if (item > 10) {
- inData.push(item - 10);
- } else {
- inData.push(item);
- }
- })
- let option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- formatter: function (item) {
- let str = item[0].axisValueLabel;
- item.map(jtem => {
- if (jtem.seriesName == 'outData') {
- str += ':' + jtem.data
- }
- });
- return str
- }
- },
- grid: {
- top: 20,
- right: 20,
- left: 50,
- bottom: 30
- },
- xAxis: [{
- type: 'category',
- data: data.xData,
- axisLine: {
- lineStyle: {
- color: '#022664'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#FFFFFF',
- fontSize: chartFontsize(14),
- interval: 0
- }
- }, {
- show: false,
- type: 'category',
- data: data.xData,
- axisLine: {
- lineStyle: {
- color: '#022664'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#FFFFFF',
- fontSize: chartFontsize(14),
- interval: 0
- }
- }],
- yAxis: [{
- splitLine: {
- lineStyle: {
- color: '#022664'
- }
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#022664'
- }
- },
- axisLabel: {
- color: '#FFFFFF',
- fontSize: chartFontsize(14)
- },
- }],
- series: [{
- name: 'outData',
- type: 'pictorialBar',
- xAxisIndex: 0,
- data: data.data,
- barCategoryGap: "0%",
- barWidth: '50%',
- symbol: 'path://d="M150 50 L130 130 L170 130 Z',
- zlevel: 2,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
- offset: 0,
- color: "#65B3AD"
- },
- {
- offset: 1,
- color: "#9EFFDA"
- }
- ]),
- opacity: 0.48
- },
- }, {
- name: 'inData',
- type: 'pictorialBar',
- xAxisIndex: 1,
- data: inData,
- barCategoryGap: "0%",
- barWidth: '30%',
- symbol: 'path://d="M150 50 L130 130 L170 130 Z',
- zlevel: 1,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
- offset: 0,
- color: "#65B3AD"
- },
- {
- offset: 1,
- color: "#9EFFDA"
- }
- ]),
- opacity: 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
- }
- batteryGroup(params).then((res) => {
- if (res.data.code == 1) {
- let optionData = {
- xData: [],
- data: []
- }
- let resData = res.data.data;
- for (let key in resData) {
- optionData.xData.push(key);
- optionData.data.push(resData[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 inData = []
+ data.data.map(item => {
+ if (item > 10) {
+ inData.push(item - 10);
+ } else {
+ inData.push(item);
+ }
+ })
+ let option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ formatter: function (item) {
+ let str = item[0].axisValueLabel;
+ item.map(jtem => {
+ if (jtem.seriesName == 'outData') {
+ str += ':' + jtem.data
+ }
+ });
+ return str
+ }
+ },
+ grid: {
+ top: 20,
+ right: 20,
+ left: 50,
+ bottom: 30
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.xData,
+ axisLine: {
+ lineStyle: {
+ color: '#022664'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#FFFFFF',
+ fontSize: chartFontsize(14),
+ interval: 0
+ }
+ }, {
+ show: false,
+ type: 'category',
+ data: data.xData,
+ axisLine: {
+ lineStyle: {
+ color: '#022664'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#FFFFFF',
+ fontSize: chartFontsize(14),
+ interval: 0
+ }
+ }],
+ yAxis: [{
+ splitLine: {
+ lineStyle: {
+ color: '#022664'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#022664'
+ }
+ },
+ axisLabel: {
+ color: '#FFFFFF',
+ fontSize: chartFontsize(14)
+ },
+ }],
+ series: [{
+ name: 'outData',
+ type: 'pictorialBar',
+ xAxisIndex: 0,
+ data: data.data,
+ barCategoryGap: "0%",
+ barWidth: '50%',
+ symbol: 'path://d="M150 50 L130 130 L170 130 Z',
+ zlevel: 2,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
+ offset: 0,
+ color: "#65B3AD"
+ },
+ {
+ offset: 1,
+ color: "#9EFFDA"
+ }
+ ]),
+ opacity: 0.48
+ },
+ }, {
+ name: 'inData',
+ type: 'pictorialBar',
+ xAxisIndex: 1,
+ data: inData,
+ barCategoryGap: "0%",
+ barWidth: '30%',
+ symbol: 'path://d="M150 50 L130 130 L170 130 Z',
+ zlevel: 1,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
+ offset: 0,
+ color: "#65B3AD"
+ },
+ {
+ offset: 1,
+ color: "#9EFFDA"
+ }
+ ]),
+ opacity: 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
+ }
+ batteryGroup(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ xData: [],
+ data: []
+ }
+ let resData = res.data.data;
+ for (let key in resData) {
+ optionData.xData.push(key);
+ optionData.data.push(resData[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