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/imgPieChart.vue | 436 ++++++++++++++++++++++++++++--------------------------
1 files changed, 224 insertions(+), 212 deletions(-)
diff --git a/src/components/charts/imgPieChart.vue b/src/components/charts/imgPieChart.vue
index fd5e4c8..b4f3dcb 100644
--- a/src/components/charts/imgPieChart.vue
+++ b/src/components/charts/imgPieChart.vue
@@ -1,224 +1,236 @@
<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 {
- rectifier
- } from '@/assets/js/api'
- const pieImg = require('../../assets/images/rectifier-img.png');
- export default {
- name: "imgPieChart",
- chart: "",
- chartData: {},
- props: {
- id: {
- require: true,
- type: String,
- default: "",
- },
- },
- data() {
- return {
+import * as echarts from 'echarts';
+//寮曞叆chart瀛椾綋鑷�傚簲
+import {
+ chartFontsize
+} from '@/assets/js/chartFontsize'
+import {
+ rectifier
+} from '@/assets/js/api'
+const pieImg = require('../../assets/images/rectifier-img.png');
+export default {
+ name: "imgPieChart",
+ chart: "",
+ chartData: {},
+ props: {
+ id: {
+ require: true,
+ type: String,
+ default: "",
+ },
+ },
+ data() {
+ return {
- }
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- organizeData(data) {
- let imgWidth = this.$refs.chart.clientWidth * 0.14;
- let imgheight = imgWidth / 0.82;
- let centerx = this.$refs.chart.clientWidth / 2;
- let centery = this.$refs.chart.clientHeight / 2;
- let option = {
- color: ['#f3535f', '#7fc57c', '#ffcb29', '#f67f21'],
- graphic: [{
- zlevel: 5,
- type: 'image',
- left: centerx - imgWidth / 2,
- top: centery - imgheight / 2,
- bounding: 'raw',
- style: {
- image: pieImg,
- width: imgWidth,
- height: imgheight,
- }
- }],
+ }
+ },
+ 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 imgWidth = this.$refs.chart.clientWidth * 0.14;
+ let imgheight = imgWidth / 0.82;
+ let centerx = this.$refs.chart.clientWidth / 2;
+ let centery = this.$refs.chart.clientHeight / 2;
+ let option = {
+ color: ['#f3535f', '#7fc57c', '#ffcb29', '#f67f21'],
+ graphic: [{
+ zlevel: 5,
+ type: 'image',
+ left: centerx - imgWidth / 2,
+ top: centery - imgheight / 2,
+ bounding: 'raw',
+ style: {
+ image: pieImg,
+ width: imgWidth,
+ height: imgheight,
+ }
+ }],
- series: [{
- name: '涓氬姟璀︾',
- type: 'pie',
- radius: ['35%', '65%'],
- itemStyle: {
- borderColor: '#021651',
- borderWidth: 6,
- },
- labelLine: {
- length: 20,
- length2: 0,
- lineStyle: {
- color: '#007ed3'
- }
- },
- label: {
- formatter: function (params) {
- return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}';
- },
- distanceToLabelLine: 0,
- rich: {
- yellow: {
- color: "#f67f21",
- fontSize: chartFontsize(20),
- fontWeight: '600',
- padding: [chartFontsize(4), 0, 0, 0],
- align: 'center'
- },
- white: {
- color: "#ffffff",
- align: 'center',
- fontSize: chartFontsize(16),
- padding: chartFontsize(4)
- },
- hr: {
- borderColor: '#007ed3',
- width: '100%',
- borderWidth: 1,
- height: 0,
- }
- }
- },
- data: data.data,
- zlevel: 1
- },
- {
- name: '',
- type: 'pie',
- radius: '50%',
- emphasis: {
- scale: false
- },
- data: [{
- value: 20,
- name: ''
- }],
- label: {
- show: false
- },
- itemStyle: {
- color: 'rgba(7,56,128,0.2)'
- },
- zlevel: 2
- },
- {
- name: '',
- type: 'pie',
- radius: '46%',
- emphasis: {
- scale: false
- },
- data: [{
- value: 20,
- name: ''
- }],
- label: {
- show: false
- },
- itemStyle: {
- color: '#00b2e0'
- },
- zlevel: 3
- },
- {
- name: '',
- type: 'pie',
- radius: '35%',
- emphasis: {
- scale: false
- },
- data: [{
- value: 20,
- name: ''
- }],
- label: {
- show: false
- },
- itemStyle: {
- color: '#ffffff'
- },
- zlevel: 4
- },
- ]
- };
- // 璁剧疆閰嶇疆椤�
- 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
- }
- rectifier(params).then((res) => {
- if (res.data.code == 1) {
- let optionData = {
- data: []
- }
- let resData = res.data.data;
- for (let key in resData) {
- let obj = {};
- obj.name = key;
- obj.value = resData[key];
- optionData.data.push(obj)
- }
- 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);
+ series: [{
+ name: '涓氬姟璀︾',
+ type: 'pie',
+ radius: ['35%', '65%'],
+ itemStyle: {
+ borderColor: '#021651',
+ borderWidth: 6,
+ },
+ labelLine: {
+ length: 20,
+ length2: 0,
+ lineStyle: {
+ color: '#007ed3'
+ }
+ },
+ label: {
+ formatter: function (params) {
+ return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}';
+ },
+ distanceToLabelLine: 0,
+ rich: {
+ yellow: {
+ color: "#f67f21",
+ fontSize: chartFontsize(20),
+ fontWeight: '600',
+ padding: [chartFontsize(4), 0, 0, 0],
+ align: 'center'
+ },
+ white: {
+ color: "#ffffff",
+ align: 'center',
+ fontSize: chartFontsize(16),
+ padding: chartFontsize(4)
+ },
+ hr: {
+ borderColor: '#007ed3',
+ width: '100%',
+ borderWidth: 1,
+ height: 0,
+ }
+ }
+ },
+ data: data.data,
+ zlevel: 1
+ },
+ {
+ name: '',
+ type: 'pie',
+ radius: '50%',
+ emphasis: {
+ scale: false
+ },
+ data: [{
+ value: 20,
+ name: ''
+ }],
+ label: {
+ show: false
+ },
+ itemStyle: {
+ color: 'rgba(7,56,128,0.2)'
+ },
+ zlevel: 2
+ },
+ {
+ name: '',
+ type: 'pie',
+ radius: '46%',
+ emphasis: {
+ scale: false
+ },
+ data: [{
+ value: 20,
+ name: ''
+ }],
+ label: {
+ show: false
+ },
+ itemStyle: {
+ color: '#00b2e0'
+ },
+ zlevel: 3
+ },
+ {
+ name: '',
+ type: 'pie',
+ radius: '35%',
+ emphasis: {
+ scale: false
+ },
+ data: [{
+ value: 20,
+ name: ''
+ }],
+ label: {
+ show: false
+ },
+ itemStyle: {
+ color: '#ffffff'
+ },
+ zlevel: 4
+ },
+ ]
+ };
+ // 璁剧疆閰嶇疆椤�
+ 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
+ }
+ rectifier(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ data: []
+ }
+ let resData = res.data.data;
+ for (let key in resData) {
+ let obj = {};
+ obj.name = key;
+ obj.value = resData[key];
+ optionData.data.push(obj)
+ }
+ 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