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/RoseChart.vue | 378 +++++++++++++++++++++++++++--------------------------
1 files changed, 195 insertions(+), 183 deletions(-)
diff --git a/src/components/charts/RoseChart.vue b/src/components/charts/RoseChart.vue
index 2c78fff..6669676 100644
--- a/src/components/charts/RoseChart.vue
+++ b/src/components/charts/RoseChart.vue
@@ -1,193 +1,205 @@
<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 {
- batteryAlarmBtsStatus
- } from '@/assets/js/api'
- export default {
- name: "RoseChart",
- chart: "",
- chartData: [],
- props: {
- id: {
- type: String,
- default: ""
- }
- },
- data() {
- return {}
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- organizeData(data) {
- let option = {
- legend: [{
- type: "scroll",
- orient: 'vertical',
- align: 'left',
- left: "5%",
- bottom: '1%',
- data: ['鏍稿鏁伴噺', '鍐呴樆娴嬭瘯鏁伴噺'],
- textStyle: {
- color: '#fff'
- }
- },
- {
- type: "scroll",
- orient: 'vertical',
- left: "40%",
- bottom: '1%',
- align: 'left',
- data: ['鍦ㄧ嚎娴厖', '鏁呴殰鏁伴噺'],
- textStyle: {
- color: '#fff'
- }
- },
- {
- orient: 'vertical',
- left: "75%",
- bottom: '8%',
- data: ['鍏呯數鏁伴噺', '鏃犵敤'],
- textStyle: {
- color: '#fff'
- }
- },
- ],
- series: [{
- type: 'pie',
- center: ['50%', '50%'],
- radius: ['0', '50%'],
- roseType: 'radius',
- itemStyle: {
- color(params) {
- return data[params.dataIndex].color;
- },
- },
- label: {
- height: 34,
- overflow: 'none',
- distanceToLabelLine: 0,
- formatter: '{a|{b}}\n{hr|}\n{value|{d}%}',
- rich: {
- a: {
- fontSize: 16,
- color: '#fff',
- },
- hr: {
- width: '100%',
- height: 1,
- backgroundColor: '#0073C5'
- },
- value: {
- fontSize: 18,
- color: '#CE6D28',
- fontWeight: 'bold',
- padding: [5, 0, 0, 0]
- }
- },
- },
- labelLine: {
- length: 20,
- length2: 10,
- lineStyle: {
- color: '#0073C5',
- width: 1,
- }
- },
- data: data
- }]
- };
+import * as echarts from 'echarts';
+import {
+ batteryAlarmBtsStatus
+} from '@/assets/js/api'
+export default {
+ name: "RoseChart",
+ chart: "",
+ chartData: [],
+ props: {
+ id: {
+ type: String,
+ default: ""
+ }
+ },
+ data() {
+ return {}
+ },
+ methods: {
+ toParentPage() {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "璁惧鐘舵�佹煡璇�",
+ name: 'btsStatusTest',
+ src: '#/dataMager/btsStatus',
+ closable: true
+ },
+ }
+ }, "*");
+ },
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ organizeData(data) {
+ let option = {
+ legend: [{
+ type: "scroll",
+ orient: 'vertical',
+ align: 'left',
+ left: "5%",
+ bottom: '1%',
+ data: ['鏍稿鏁伴噺', '鍐呴樆娴嬭瘯鏁伴噺'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ {
+ type: "scroll",
+ orient: 'vertical',
+ left: "40%",
+ bottom: '1%',
+ align: 'left',
+ data: ['鍦ㄧ嚎娴厖', '鏁呴殰鏁伴噺'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ {
+ orient: 'vertical',
+ left: "75%",
+ bottom: '8%',
+ data: ['鍏呯數鏁伴噺', '鏃犵敤'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ ],
+ series: [{
+ type: 'pie',
+ center: ['50%', '50%'],
+ radius: ['0', '50%'],
+ roseType: 'radius',
+ itemStyle: {
+ color(params) {
+ return data[params.dataIndex].color;
+ },
+ },
+ label: {
+ height: 34,
+ overflow: 'none',
+ distanceToLabelLine: 0,
+ formatter: '{a|{b}}\n{hr|}\n{value|{d}%}',
+ rich: {
+ a: {
+ fontSize: 16,
+ color: '#fff',
+ },
+ hr: {
+ width: '100%',
+ height: 1,
+ backgroundColor: '#0073C5'
+ },
+ value: {
+ fontSize: 18,
+ color: '#CE6D28',
+ fontWeight: 'bold',
+ padding: [5, 0, 0, 0]
+ }
+ },
+ },
+ labelLine: {
+ length: 20,
+ length2: 10,
+ lineStyle: {
+ color: '#0073C5',
+ width: 1,
+ }
+ },
+ data: data
+ }]
+ };
- // 璁剧疆鍥捐〃閰嶇疆椤�
- 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
- }
- batteryAlarmBtsStatus(params).then((res) => {
- if (res.data.code == 1) {
- let optionData = [{
- value: 0,
- name: '鍦ㄧ嚎娴厖',
- color: '#E85D22'
- },
- {
- value: 0,
- name: '鍏呯數鏁伴噺',
- color: '#76CFDD'
- },
- {
- value: 0,
- name: '鍐呴樆娴嬭瘯鏁伴噺',
- color: '#FEDB5B'
- },
- {
- value: 0,
- name: '鏁呴殰鏁伴噺',
- color: '#8278E9'
- },
- {
- value: 0,
- name: '鏍稿鏁伴噺',
- color: '#9EE6B8'
- },
- ]
- let resData = res.data.data;
- for (let key in resData) {
- optionData.map(item => {
- if (item.name == key) {
- item.value = 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);
+ // 璁剧疆鍥捐〃閰嶇疆椤�
+ 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
+ }
+ batteryAlarmBtsStatus(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = [{
+ value: 0,
+ name: '鍦ㄧ嚎娴厖',
+ color: '#E85D22'
+ },
+ {
+ value: 0,
+ name: '鍏呯數鏁伴噺',
+ color: '#76CFDD'
+ },
+ {
+ value: 0,
+ name: '鍐呴樆娴嬭瘯鏁伴噺',
+ color: '#FEDB5B'
+ },
+ {
+ value: 0,
+ name: '鏁呴殰鏁伴噺',
+ color: '#8278E9'
+ },
+ {
+ value: 0,
+ name: '鏍稿鏁伴噺',
+ color: '#9EE6B8'
+ },
+ ]
+ let resData = res.data.data;
+ for (let key in resData) {
+ optionData.map(item => {
+ if (item.name == key) {
+ item.value = 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