From edba26ba8377814d94b65b4a1a1fe04f0365afc9 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期一, 18 十月 2021 14:59:41 +0800
Subject: [PATCH] 模块添加双击放大功能
---
src/components/charts/AcInput.vue | 262 ++++++++++++++++++++++++++--------------------------
1 files changed, 131 insertions(+), 131 deletions(-)
diff --git a/src/components/charts/AcInput.vue b/src/components/charts/AcInput.vue
index 4e79fef..8443d4a 100644
--- a/src/components/charts/AcInput.vue
+++ b/src/components/charts/AcInput.vue
@@ -1,144 +1,144 @@
<template>
- <div class="echarts-wrapper">
- <div class="echarts-content" ref="chart"></div>
- <div class="echarts-text-wrapper">
- <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
- <div class="echarts-text">
- {{title}}
- </div>
- </div>
- </div>
+ <div class="echarts-wrapper">
+ <div class="echarts-content" ref="chart"></div>
+ <div class="echarts-text-wrapper">
+ <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
+ <div class="echarts-text">
+ {{title}}
+ </div>
+ </div>
+ </div>
</template>
<script>
- import * as echarts from "echarts";
+import * as echarts from "echarts";
- export default {
- name: "AcInput",
- chart: "",
- chartData: "",
- data() {
- return {
- acColor: '#813a74',
- resColor: '#ff649d',
- title: ''
- }
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- setData(sendData) {
- this.$options.chartData = sendData;
- this.acColor = sendData.acColor;
- this.resColor = sendData.resColor;
- this.title = sendData.title;
- let option = {
- title: {
- text: sendData.data + '%',
- x: 'center',
- y: 'center',
- textStyle: {
- color: "#fff",
- fontSize: 24,
- }
- },
- series: [{
- name: "",
- type: 'gauge',
- radius: '90%',
- startAngle: 180.5,
- endAngle: -0.5,
- min: 0,
- max: 100,
- title: {
- show: false
- },
- detail: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- width: 20,
- color: [
- [
- sendData.data / 100, this.acColor
- ],
- [
- 1, this.resColor
- ]
- ]
- }
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: false
- },
- pointer: {
- show: false,
- },
- itemStyle: {
- normal: {
- color: '#FF0000',
- }
- },
- data: [{
- value: sendData,
- name: '骞村敭鐢甸噺鎯呭喌'
- }]
- }]
- };
+export default {
+ name: "AcInput",
+ chart: "",
+ chartData: "",
+ data() {
+ return {
+ acColor: '#813a74',
+ resColor: '#ff649d',
+ title: ''
+ }
+ },
+ methods: {
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ setData(sendData) {
+ this.$options.chartData = sendData;
+ this.acColor = sendData.acColor;
+ this.resColor = sendData.resColor;
+ this.title = sendData.title;
+ let option = {
+ title: {
+ text: sendData.data + '%',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ color: "#fff",
+ fontSize: 24,
+ }
+ },
+ series: [{
+ name: "",
+ type: 'gauge',
+ radius: '90%',
+ startAngle: 180.5,
+ endAngle: -0.5,
+ min: 0,
+ max: 100,
+ title: {
+ show: false
+ },
+ detail: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 20,
+ color: [
+ [
+ sendData.data / 100, this.acColor
+ ],
+ [
+ 1, this.resColor
+ ]
+ ]
+ }
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false
+ },
+ pointer: {
+ show: false,
+ },
+ itemStyle: {
+ normal: {
+ color: '#FF0000',
+ }
+ },
+ data: [{
+ value: sendData,
+ name: '骞村敭鐢甸噺鎯呭喌'
+ }]
+ }]
+ };
- // 璁剧疆閰嶇疆椤�
- this.setOption(option);
- },
- 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);
+ },
+ 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>
- .echarts-text-wrapper {
- position: absolute;
- top: 56%;
- left: 22.5%;
- width: 55%;
- text-align: center;
- }
+.echarts-text-wrapper {
+ position: absolute;
+ top: 56%;
+ left: 22.5%;
+ width: 55%;
+ text-align: center;
+}
- .color-strip {
- height: 4px;
- }
+.color-strip {
+ height: 4px;
+}
- .echarts-text {
- display: inline-block;
- margin-top: 8px;
- padding: 8px 20px;
- background-color: #083880;
- border: 1px solid #01b1e0;
- border-radius: 16px;
- font-size: 12px;
- }
+.echarts-text {
+ display: inline-block;
+ margin-top: 8px;
+ padding: 8px 20px;
+ background-color: #083880;
+ border: 1px solid #01b1e0;
+ border-radius: 16px;
+ font-size: 12px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1