From a355aafef5a635bd31a701127cea097338cee0a7 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期三, 13 十月 2021 14:55:22 +0800
Subject: [PATCH] 图形跳转对应参数界面功能
---
src/components/charts/prossPieChart.vue | 371 ++++++++++++++++++++++++++++------------------------
1 files changed, 198 insertions(+), 173 deletions(-)
diff --git a/src/components/charts/prossPieChart.vue b/src/components/charts/prossPieChart.vue
index d0ad46f..968f5e4 100644
--- a/src/components/charts/prossPieChart.vue
+++ b/src/components/charts/prossPieChart.vue
@@ -1,185 +1,210 @@
<template>
- <div class="echarts-wrapper">
- <div class="echarts-content" ref="chart">
+ <div class="echarts-wrapper">
+ <div class="echarts-content" ref="chart">
- </div>
- </div>
+ </div>
+ </div>
</template>
<script>
- import * as echarts from 'echarts';
- //寮曞叆chart瀛椾綋鑷�傚簲
- import {
- chartFontsize
- } from '@/assets/js/chartFontsize'
- export default {
- name: "prossPieChart",
- chart: "",
- chartData: [],
- props: {
- id: {
- require: true,
- type: String,
- default: "",
- },
- },
- data() {
- return {
+import * as echarts from 'echarts';
+//寮曞叆chart瀛椾綋鑷�傚簲
+import {
+ chartFontsize
+} from '@/assets/js/chartFontsize'
+import { checkboxs } from '@/assets/js/powerInfoData'
+export default {
+ name: "prossPieChart",
+ chart: "",
+ chartData: [],
+ props: {
+ id: {
+ require: true,
+ type: String,
+ default: "",
+ },
+ },
+ data() {
+ return {
- }
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- setData(sendData) {
- this.$options.chartData = sendData;
- let color = sendData.color;
- let data = sendData.data;
- let text;
- if (sendData.unit) {
- text = sendData.data + sendData.unit;
- } else {
- text = sendData.data
- }
- let title = sendData.title;
- let option = {
- title: {
- text: '{a|' + title + '}',
- x: 'center',
- top: '80%',
- textStyle: {
- rich: {
- a: {
- fontSize: chartFontsize(16),
- color: '#ffffff'
- },
- }
- },
- zlevel: 4
- },
- polar: {
- radius: ['65%', '57%'],
- center: ['50%', '40%'],
- },
- angleAxis: {
- max: 100,
- show: false,
- },
- radiusAxis: {
- type: 'category',
- show: true,
- axisLabel: {
- show: false,
- },
- axisLine: {
- show: false,
+ }
+ },
+ methods: {
+ toParentPage(value) {
+ if (typeof (value) == 'string') {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "鐢垫簮瀹炴椂鍛婅",
+ name: "powerRealtimeInfo",
+ src: '#/powerRealtimeInfo/?alarmType=' + value,
+ closable: true
+ },
+ }
+ }, "*");
+ }
+ },
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ this.$options.chart.on('click', (params) => {
+ let name = params.seriesName;
+ checkboxs.zt.map(item => {
+ if (item.label == name) {
+ console.log(item.value)
+ this.toParentPage(item.value)
+ }
+ })
+ })
+ },
+ setData(sendData) {
+ this.$options.chartData = sendData;
+ let color = sendData.color;
+ let data = sendData.data;
+ let name = sendData.name;
+ let text;
+ if (sendData.unit) {
+ text = sendData.data + sendData.unit;
+ } else {
+ text = sendData.data
+ }
+ let title = sendData.title;
+ let option = {
+ title: {
+ text: '{a|' + title + '}',
+ x: 'center',
+ top: '80%',
+ textStyle: {
+ rich: {
+ a: {
+ fontSize: chartFontsize(16),
+ color: '#ffffff'
+ },
+ }
+ },
+ zlevel: 4
+ },
+ polar: {
+ radius: ['65%', '57%'],
+ center: ['50%', '40%'],
+ },
+ angleAxis: {
+ max: 100,
+ show: false,
+ },
+ radiusAxis: {
+ type: 'category',
+ show: true,
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
- },
- axisTick: {
- show: false
- },
- },
- series: [{
- name: '',
- type: 'pie',
- radius: '75%',
- center: ['50%', '40%'],
- emphasis: {
- scale: false
- },
- data: [{
- value: data,
- name: ''
- }],
- label: {
- show: false
- },
- itemStyle: {
- color: color
- },
- zlevel: 1
- }, {
- name: '',
- type: 'pie',
- radius: '61%',
- center: ['50%', '40%'],
- emphasis: {
- scale: false
- },
- data: [{
- value: data,
- name: ''
- }],
- label: {
- show: false
- },
- itemStyle: {
- color: 'transparent',
- borderType: 'dashed',
- borderColor: '#ffffff'
- },
- zlevel: 2
- },
- {
- name: '',
- type: 'pie',
- radius: '61%',
- center: ['50%', '40%'],
- emphasis: {
- scale: false
- },
- data: [{
- value: data,
- name: text
- }],
- label: {
- show: true,
- position: "center",
- fontSize: chartFontsize(24),
- fontWeight: '600',
- color: '#ffffff'
- },
- itemStyle: {
- color: color,
- },
- zlevel: 3
- }, {
- name: '',
- type: 'bar',
- center: ['50%', '40%'],
- roundCap: true,
- data: [data],
- coordinateSystem: 'polar',
- itemStyle: {
- color: '#ffffff',
- },
- zlevel: 4
- },
- ]
- };
- // 璁剧疆閰嶇疆椤�
- this.setOption(option);
- },
- resize() {
- setTimeout(() => {
- this.$options.chart.resize();
- this.setData(this.$options.chartData);
- }, 300)
- },
- },
- mounted() {
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.chart = echarts.init(this.$refs.chart);
+ },
+ axisTick: {
+ show: false
+ },
+ },
+ series: [{
+ name: name,
+ type: 'pie',
+ radius: '75%',
+ center: ['50%', '40%'],
+ emphasis: {
+ scale: false
+ },
+ data: [{
+ value: data,
+ name: ''
+ }],
+ label: {
+ show: false
+ },
+ itemStyle: {
+ color: color
+ },
+ zlevel: 1
+ }, {
+ name: name,
+ type: 'pie',
+ radius: '61%',
+ center: ['50%', '40%'],
+ emphasis: {
+ scale: false
+ },
+ data: [{
+ value: data,
+ name: ''
+ }],
+ label: {
+ show: false
+ },
+ itemStyle: {
+ color: 'transparent',
+ borderType: 'dashed',
+ borderColor: '#ffffff'
+ },
+ zlevel: 2
+ },
+ {
+ name: name,
+ type: 'pie',
+ radius: '61%',
+ center: ['50%', '40%'],
+ emphasis: {
+ scale: false
+ },
+ data: [{
+ value: data,
+ name: text
+ }],
+ label: {
+ show: true,
+ position: "center",
+ fontSize: chartFontsize(24),
+ fontWeight: '600',
+ color: '#ffffff'
+ },
+ itemStyle: {
+ color: color,
+ },
+ zlevel: 3
+ }, {
+ name: name,
+ type: 'bar',
+ center: ['50%', '40%'],
+ roundCap: true,
+ data: [data],
+ coordinateSystem: 'polar',
+ itemStyle: {
+ color: '#ffffff',
+ },
+ zlevel: 4
+ },
+ ]
+ };
+ // 璁剧疆閰嶇疆椤�
+ this.setOption(option);
+ },
+ resize() {
+ setTimeout(() => {
+ this.$options.chart.resize();
+ 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