From c84d328cb6448786aee00f1b0684aaa07186e410 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期四, 04 三月 2021 10:56:56 +0800
Subject: [PATCH] chart字体自适应
---
src/components/charts/abeamProChart.vue | 16 +++++--
src/components/charts/prossPieChart.vue | 15 +++++--
src/components/charts/imgPieChart.vue | 18 +++++----
src/components/charts/latticeBar.vue | 12 ++++-
src/assets/js/chartFontsize.js | 6 +++
src/components/charts/triangleBarChart.vue | 15 +++++--
6 files changed, 56 insertions(+), 26 deletions(-)
diff --git a/src/assets/js/chartFontsize.js b/src/assets/js/chartFontsize.js
new file mode 100644
index 0000000..05bf1a8
--- /dev/null
+++ b/src/assets/js/chartFontsize.js
@@ -0,0 +1,6 @@
+export const chartFontsize = (res) => {
+ let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+ if (!clientWidth) return;
+ let fontSize = clientWidth / 1920;
+ return res * fontSize;
+}
\ No newline at end of file
diff --git a/src/components/charts/abeamProChart.vue b/src/components/charts/abeamProChart.vue
index 3f920db..fdaf635 100644
--- a/src/components/charts/abeamProChart.vue
+++ b/src/components/charts/abeamProChart.vue
@@ -8,8 +8,10 @@
<script>
import * as echarts from 'echarts';
- //寮曞叆鎻愮ず妗�
- import "echarts/lib/component/tooltip";
+ //寮曞叆chart瀛椾綋鑷�傚簲
+ import {
+ chartFontsize
+ } from '@/assets/js/chartFontsize'
export default {
name: "abeamProChart",
chart: "",
@@ -31,6 +33,7 @@
this.$options.chart.setOption(opt);
},
setData(sendData) {
+ this.$options.chartData = sendData;
let dataColor = sendData.color;
let bgColor = sendData.bgColor;
let yData = sendData.yData;
@@ -69,7 +72,8 @@
axisLabel: {
show: true,
textStyle: {
- color: '#fff'
+ color: '#fff',
+ fontSize: chartFontsize(12),
},
},
splitLine: {
@@ -88,7 +92,8 @@
axisLabel: {
show: true,
textStyle: {
- color: '#fff'
+ color: '#fff',
+ fontSize: chartFontsize(12),
},
},
splitLine: {
@@ -130,7 +135,7 @@
normal: {
show: true,
position: 'insideRight',
- fontSize: 20,
+ fontSize: chartFontsize(20),
color: '#021750'
}
},
@@ -167,6 +172,7 @@
},
resize() {
this.$options.chart.resize();
+ this.setData(this.$options.chartData);
}
},
mounted() {
diff --git a/src/components/charts/imgPieChart.vue b/src/components/charts/imgPieChart.vue
index 6ac204e..40ec934 100644
--- a/src/components/charts/imgPieChart.vue
+++ b/src/components/charts/imgPieChart.vue
@@ -8,8 +8,10 @@
<script>
import * as echarts from 'echarts';
- //寮曞叆鎻愮ず妗�
- import "echarts/lib/component/tooltip";
+ //寮曞叆chart瀛椾綋鑷�傚簲
+ import {
+ chartFontsize
+ } from '@/assets/js/chartFontsize'
const pieImg = require('../../assets/images/rectifier-img.png');
export default {
name: "imgPieChart",
@@ -32,7 +34,7 @@
this.$options.chart.setOption(opt);
},
setData(sendData) {
- this.$options.chartData = sendData
+ this.$options.chartData = sendData;
let imgWidth = this.$refs.chart.clientWidth * 0.14;
let imgheight = imgWidth / 0.82;
let centerx = this.$refs.chart.clientWidth / 2;
@@ -79,16 +81,16 @@
rich: {
yellow: {
color: "#f67f21",
- fontSize: 16,
+ fontSize: chartFontsize(16),
fontWeight: '600',
- padding: [4, 0, 0, 0],
+ padding: [chartFontsize(4), 0, 0, 0],
align: 'center'
},
white: {
color: "#ffffff",
align: 'center',
- fontSize: 12,
- padding: 4
+ fontSize: chartFontsize(12),
+ padding: chartFontsize(4)
},
hr: {
borderColor: '#007ed3',
@@ -171,7 +173,7 @@
},
resize() {
this.$options.chart.resize();
- this.setData(this.$options.chartData)
+ this.setData(this.$options.chartData);
}
},
mounted() {
diff --git a/src/components/charts/latticeBar.vue b/src/components/charts/latticeBar.vue
index 8521829..c4a97a6 100644
--- a/src/components/charts/latticeBar.vue
+++ b/src/components/charts/latticeBar.vue
@@ -8,10 +8,13 @@
<script>
import * as echarts from 'echarts';
-
+ import {
+ chartFontsize
+ } from '@/assets/js/chartFontsize'
export default {
name: "latticeBar",
chart: "",
+ chartData: [],
props: {
id: {
require: true,
@@ -29,6 +32,7 @@
this.$options.chart.setOption(opt);
},
setData(sendData) {
+ this.$options.chartData = sendData;
let option = {
tooltip: {
trigger: 'axis',
@@ -71,7 +75,7 @@
},
axisLabel: {
color: '#FFFFFF',
- fontSize: 12,
+ fontSize: chartFontsize(12),
interval: 0
}
}],
@@ -91,7 +95,8 @@
},
axisLabel: {
textStyle: {
- color: '#FFFFFF'
+ color: '#FFFFFF',
+ fontSize: chartFontsize(12),
},
},
}],
@@ -162,6 +167,7 @@
},
resize() {
this.$options.chart.resize();
+ this.setData(this.$options.chartData);
}
},
mounted() {
diff --git a/src/components/charts/prossPieChart.vue b/src/components/charts/prossPieChart.vue
index 392eaed..f90b15e 100644
--- a/src/components/charts/prossPieChart.vue
+++ b/src/components/charts/prossPieChart.vue
@@ -8,11 +8,14 @@
<script>
import * as echarts from 'echarts';
- //寮曞叆鎻愮ず妗�
- import "echarts/lib/component/tooltip";
+ //寮曞叆chart瀛椾綋鑷�傚簲
+ import {
+ chartFontsize
+ } from '@/assets/js/chartFontsize'
export default {
name: "prossPieChart",
chart: "",
+ chartData: [],
props: {
id: {
require: true,
@@ -30,6 +33,7 @@
this.$options.chart.setOption(opt);
},
setData(sendData) {
+ this.$options.chartData = sendData;
let color = sendData.color;
let data = sendData.data;
let text;
@@ -47,7 +51,7 @@
textStyle: {
rich: {
a: {
- fontSize: 16,
+ fontSize: chartFontsize(16),
color: '#ffffff'
},
}
@@ -135,7 +139,7 @@
normal: {
show: true,
position: "center",
- fontSize: 14,
+ fontSize: chartFontsize(24),
fontWeight: '600',
color: '#ffffff'
}
@@ -167,7 +171,8 @@
},
resize() {
this.$options.chart.resize();
- }
+ this.setData(this.$options.chartData);
+ },
},
mounted() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
diff --git a/src/components/charts/triangleBarChart.vue b/src/components/charts/triangleBarChart.vue
index 5fdb2f4..f230114 100644
--- a/src/components/charts/triangleBarChart.vue
+++ b/src/components/charts/triangleBarChart.vue
@@ -8,8 +8,10 @@
<script>
import * as echarts from 'echarts';
- //寮曞叆鎻愮ず妗�
- import "echarts/lib/component/tooltip";
+ //寮曞叆chart瀛椾綋鑷�傚簲
+ import {
+ chartFontsize
+ } from '@/assets/js/chartFontsize'
export default {
name: "triangleBarChart",
chart: "",
@@ -31,6 +33,7 @@
this.$options.chart.setOption(opt);
},
setData(sendData) {
+ this.$options.chartData = sendData;
let inData = []
sendData.data.map(item => {
inData.push(item - 10);
@@ -70,7 +73,7 @@
},
axisLabel: {
color: '#FFFFFF',
- fontSize: 12,
+ fontSize: chartFontsize(12),
interval: 0
}
}, {
@@ -87,7 +90,7 @@
},
axisLabel: {
color: '#FFFFFF',
- fontSize: 12,
+ fontSize: chartFontsize(12),
interval: 0
}
}],
@@ -108,7 +111,8 @@
},
axisLabel: {
textStyle: {
- color: '#FFFFFF'
+ color: '#FFFFFF',
+ fontSize: chartFontsize(12)
},
},
}],
@@ -165,6 +169,7 @@
},
resize() {
this.$options.chart.resize();
+ this.setData(this.$options.chartData);
}
},
mounted() {
--
Gitblit v1.9.1