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/CustomPie.vue | 730 ++++++++++++++++++++++++++++---------------------------
1 files changed, 371 insertions(+), 359 deletions(-)
diff --git a/src/components/charts/CustomPie.vue b/src/components/charts/CustomPie.vue
index 6cfa615..0f38ddd 100644
--- a/src/components/charts/CustomPie.vue
+++ b/src/components/charts/CustomPie.vue
@@ -1,368 +1,380 @@
<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 sigh from './images/sigh.png';
- import {
- chartFontsize
- } from '@/assets/js/chartFontsize';
- import {
- powerAlarmError
- } from '@/assets/js/api'
- export default {
- name: "CustomPie",
- chart: "",
- chartData: {},
- data() {
- return {}
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- organizeData(data) {
- let angle = 0;
- let color = "#007CD0";
- let radius = 0.55;
- let lineWidth = 4;
- let width = this.$refs.chart.offsetWidth;
- let height = this.$refs.chart.offsetHeight;
- let realWidth = width > height ? height : width;
- let option = {
- legend: [{
- show: true,
- type: "scroll",
- orient: 'vertical',
- align: 'left',
- left: "10%",
- bottom: 0,
- data: ['鐩戞帶鍣ㄦ晠闅�', '閫氳鏁呴殰'],
- textStyle: {
- color: '#fff'
- }
- },
- {
- show: true,
- type: "scroll",
- orient: 'vertical',
- align: 'left',
- left: "40%",
- bottom: 0,
- data: ['浜ゆ祦鎬绘晠闅�', '闃查浄鍣ㄦ晠闅�'],
- textStyle: {
- color: '#fff'
- }
- },
- {
- show: true,
- type: "scroll",
- orient: 'vertical',
- align: 'left',
- left: "70%",
- bottom: 0,
- data: ['寮�鍏虫煖鏁呴殰', '鐩存祦鎬绘晠闅�'],
- textStyle: {
- color: '#fff'
- }
- },
- ],
- graphic: [{
- z: 4,
- type: 'image',
- id: 'logo',
- left: (width - realWidth / 5) / (2 * width) * 100 + '%',
- top: (height - realWidth / 5) / (2 * height) * 100 + '%',
- bounding: 'raw',
- rotation: 0, //鏃嬭浆
- scale: [1.0, 1.0], //缂╂斁
- style: {
- image: sigh,
- width: realWidth / 5,
- height: realWidth / 5,
- opacity: 1,
- }
- }],
- series: [{
- name: '',
- type: 'pie',
- radius: ['40%', '50%'],
- avoidLabelOverlap: false,
- 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: chartFontsize(16),
- color: '#fff',
- },
- hr: {
- width: '100%',
- height: 1,
- backgroundColor: '#0073C5'
- },
- value: {
- fontSize: chartFontsize(18),
- color: '#CE6D28',
- fontWeight: 'bold',
- padding: [5, 0, 0, 0]
- }
- },
- },
- labelLine: {
- length: 30,
- length2: 10,
- lineStyle: {
- color: '#0073C5',
- width: 1,
- }
- },
- data: data,
- },
- {
- name: "ring5",
- type: 'custom',
- coordinateSystem: "none",
- renderItem: function (params, api) {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
- startAngle: (292.5 + angle) * Math.PI / 180,
- endAngle: (337.5 + angle) * Math.PI / 180
- },
- style: {
- stroke: color,
- fill: "transparent",
- lineWidth: lineWidth
- },
- silent: true
- };
- },
- data: [0]
- },
- {
- name: "ring5",
- type: 'custom',
- coordinateSystem: "none",
- renderItem: function (params, api) {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
- startAngle: (22.5 + angle) * Math.PI / 180,
- endAngle: (67.5 + angle) * Math.PI / 180
- },
- style: {
- stroke: color,
- fill: "transparent",
- lineWidth: lineWidth
- },
- silent: true
- };
- },
- data: [0]
- },
- {
- name: "ring5",
- type: 'custom',
- coordinateSystem: "none",
- renderItem: function (params, api) {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
- startAngle: (112.5 + angle) * Math.PI / 180,
- endAngle: (157.5 + angle) * Math.PI / 180
- },
- style: {
- stroke: color,
- fill: "transparent",
- lineWidth: lineWidth
- },
- silent: true
- };
- },
- data: [0]
- },
- {
- name: "ring5",
- type: 'custom',
- coordinateSystem: "none",
- renderItem: function (params, api) {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
- startAngle: (200.5 + angle) * Math.PI / 180,
- endAngle: (245.5 + angle) * Math.PI / 180
- },
- style: {
- stroke: color,
- fill: "transparent",
- lineWidth: lineWidth
- },
- silent: true
- };
- },
- data: [0]
- },
- {
- name: "ring5",
- type: 'custom',
- coordinateSystem: "none",
- renderItem: function (params, api) {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
- startAngle: 0 * Math.PI / 180,
- endAngle: 360 * Math.PI / 180
- },
- style: {
- stroke: color,
- fill: "transparent",
- lineWidth: 1
- },
- silent: true
- };
- },
- data: [0]
- },
- {
- name: '',
- type: 'pie',
- radius: [0, '35%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: false,
- fontSize: '40',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [0],
- itemStyle: {
- color: '#007ED3'
- }
- }
- ]
- };
- // 璁剧疆閰嶇疆椤�
- 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
- }
- powerAlarmError(params).then((res) => {
- if (res.data.code == 1) {
- let optionData = [{
- value: 0,
- name: '閫氳鏁呴殰',
- color: '#5062DE'
- },
- {
- value: 0,
- name: '鐩存祦鎬绘晠闅�',
- color: '#FD5E02'
- },
- {
- value: 0,
- name: '闃查浄鍣ㄦ晠闅�',
- color: '#8C6BFA'
- },
- {
- value: 0,
- name: '寮�鍏虫煖鏁呴殰',
- color: '#F58881'
- },
- {
- value: 0,
- name: '鐩戞帶鍣ㄦ晠闅�',
- color: '#EDE611'
- },
- {
- value: 0,
- name: '浜ゆ祦鎬绘晠闅�',
- color: '#43F9FD'
- },
- ]
- 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);
+import * as echarts from 'echarts';
+import sigh from './images/sigh.png';
+import {
+ chartFontsize
+} from '@/assets/js/chartFontsize';
+import {
+ powerAlarmError
+} from '@/assets/js/api'
+export default {
+ name: "CustomPie",
+ chart: "",
+ chartData: {},
+ data() {
+ return {}
+ },
+ methods: {
+ toParentPage() {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "鐢垫簮瀹炴椂鍛婅",
+ name: "powerRealtimeInfo",
+ src: "#/powerRealtimeInfo",
+ closable: true
+ },
+ }
+ }, "*");
+ },
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ organizeData(data) {
+ let angle = 0;
+ let color = "#007CD0";
+ let radius = 0.55;
+ let lineWidth = 4;
+ let width = this.$refs.chart.offsetWidth;
+ let height = this.$refs.chart.offsetHeight;
+ let realWidth = width > height ? height : width;
+ let option = {
+ legend: [{
+ show: true,
+ type: "scroll",
+ orient: 'vertical',
+ align: 'left',
+ left: "10%",
+ bottom: 0,
+ data: ['鐩戞帶鍣ㄦ晠闅�', '閫氳鏁呴殰'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ {
+ show: true,
+ type: "scroll",
+ orient: 'vertical',
+ align: 'left',
+ left: "40%",
+ bottom: 0,
+ data: ['浜ゆ祦鎬绘晠闅�', '闃查浄鍣ㄦ晠闅�'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ {
+ show: true,
+ type: "scroll",
+ orient: 'vertical',
+ align: 'left',
+ left: "70%",
+ bottom: 0,
+ data: ['寮�鍏虫煖鏁呴殰', '鐩存祦鎬绘晠闅�'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ ],
+ graphic: [{
+ z: 4,
+ type: 'image',
+ id: 'logo',
+ left: (width - realWidth / 5) / (2 * width) * 100 + '%',
+ top: (height - realWidth / 5) / (2 * height) * 100 + '%',
+ bounding: 'raw',
+ rotation: 0, //鏃嬭浆
+ scale: [1.0, 1.0], //缂╂斁
+ style: {
+ image: sigh,
+ width: realWidth / 5,
+ height: realWidth / 5,
+ opacity: 1,
+ }
+ }],
+ series: [{
+ name: '',
+ type: 'pie',
+ radius: ['40%', '50%'],
+ avoidLabelOverlap: false,
+ 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: chartFontsize(16),
+ color: '#fff',
+ },
+ hr: {
+ width: '100%',
+ height: 1,
+ backgroundColor: '#0073C5'
+ },
+ value: {
+ fontSize: chartFontsize(18),
+ color: '#CE6D28',
+ fontWeight: 'bold',
+ padding: [5, 0, 0, 0]
+ }
+ },
+ },
+ labelLine: {
+ length: 30,
+ length2: 10,
+ lineStyle: {
+ color: '#0073C5',
+ width: 1,
+ }
+ },
+ data: data,
+ },
+ {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function (params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
+ startAngle: (292.5 + angle) * Math.PI / 180,
+ endAngle: (337.5 + angle) * Math.PI / 180
+ },
+ style: {
+ stroke: color,
+ fill: "transparent",
+ lineWidth: lineWidth
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ },
+ {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function (params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
+ startAngle: (22.5 + angle) * Math.PI / 180,
+ endAngle: (67.5 + angle) * Math.PI / 180
+ },
+ style: {
+ stroke: color,
+ fill: "transparent",
+ lineWidth: lineWidth
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ },
+ {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function (params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
+ startAngle: (112.5 + angle) * Math.PI / 180,
+ endAngle: (157.5 + angle) * Math.PI / 180
+ },
+ style: {
+ stroke: color,
+ fill: "transparent",
+ lineWidth: lineWidth
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ },
+ {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function (params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
+ startAngle: (200.5 + angle) * Math.PI / 180,
+ endAngle: (245.5 + angle) * Math.PI / 180
+ },
+ style: {
+ stroke: color,
+ fill: "transparent",
+ lineWidth: lineWidth
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ },
+ {
+ name: "ring5",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function (params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
+ startAngle: 0 * Math.PI / 180,
+ endAngle: 360 * Math.PI / 180
+ },
+ style: {
+ stroke: color,
+ fill: "transparent",
+ lineWidth: 1
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ },
+ {
+ name: '',
+ type: 'pie',
+ radius: [0, '35%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: false,
+ fontSize: '40',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [0],
+ itemStyle: {
+ color: '#007ED3'
+ }
+ }
+ ]
+ };
+ // 璁剧疆閰嶇疆椤�
+ 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
+ }
+ powerAlarmError(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = [{
+ value: 0,
+ name: '閫氳鏁呴殰',
+ color: '#5062DE'
+ },
+ {
+ value: 0,
+ name: '鐩存祦鎬绘晠闅�',
+ color: '#FD5E02'
+ },
+ {
+ value: 0,
+ name: '闃查浄鍣ㄦ晠闅�',
+ color: '#8C6BFA'
+ },
+ {
+ value: 0,
+ name: '寮�鍏虫煖鏁呴殰',
+ color: '#F58881'
+ },
+ {
+ value: 0,
+ name: '鐩戞帶鍣ㄦ晠闅�',
+ color: '#EDE611'
+ },
+ {
+ value: 0,
+ name: '浜ゆ祦鎬绘晠闅�',
+ color: '#43F9FD'
+ },
+ ]
+ 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