From 1ce8dd8980692da59fac09d4f868b490f7f74b88 Mon Sep 17 00:00:00 2001
From: yupan <yupanx@163.com>
Date: Thu, 27 Oct 2022 10:24:24 +0800
Subject: [PATCH] Merge branch 'master' of http://blit.7drlb.com:8888/r/moral_fronted
---
src/components/Echarts/LineChart.vue | 264 ++++++++++++++++++++++++++++------------------------
1 files changed, 143 insertions(+), 121 deletions(-)
diff --git a/src/components/Echarts/LineChart.vue b/src/components/Echarts/LineChart.vue
index 7948ca8..bf3d6ca 100644
--- a/src/components/Echarts/LineChart.vue
+++ b/src/components/Echarts/LineChart.vue
@@ -1,8 +1,5 @@
<template>
- <!-- <div> -->
- <!-- <div>1111111111111111111111111111111111111111</div> -->
- <div :class="className" :style="{height:height,width:width}" />
- <!-- </div> -->
+ <div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
@@ -16,28 +13,28 @@
props: {
className: {
type: String,
- default: 'chart'
+ default: 'chart',
},
width: {
type: String,
- default: '100%'
+ default: '100%',
},
height: {
type: String,
- default: '350px'
+ default: '350px',
},
autoResize: {
type: Boolean,
- default: true
+ default: true,
},
chartData: {
type: Object,
- required: true
+ required: true,
},
interval: {
type: Number,
- default: 1
- }
+ default: 1,
+ },
// xdata: {
// type: Array,
// required: true
@@ -45,7 +42,7 @@
},
data() {
return {
- chart: null
+ chart: null,
}
},
watch: {
@@ -53,8 +50,8 @@
deep: true,
handler(val) {
this.setOptions(val)
- }
- }
+ },
+ },
// xdata: {
// deep: true,
// handler(val) {
@@ -65,10 +62,9 @@
// }
},
mounted() {
- // this.$nextTick(() => {
- // this.initChart()
- // })
- this.initChart()
+ this.$nextTick(() => {
+ this.initChart()
+ })
},
beforeDestroy() {
if (!this.chart) {
@@ -78,117 +74,143 @@
this.chart = null
},
methods: {
+
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions(val) {
+ function fontSize(res){
+ let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
+ if (!clientWidth) return;
+ let fontSize = 100 * (clientWidth / 1920);
+ return res*fontSize;
+ }
+
// console.log('���������������������')
- // console.log(val)
- this.chart.setOption({
- title: {
- text: val.text,
- textStyle: {
- color: '#000000'
- }
- },
- xAxis: {
- data: val.xAxis,
- boundaryGap: false,
- axisTick: {
- show: false
- },
- // axisTick: { // ������������������������������
- // alignWithLabel: true,
- // show: true
- // },
- axisLine: {
- lineStyle: {
- color: '#000000'
- }
- },
- axisLabel: {
- interval: this.interval
- }
- },
- grid: {
- left: '5%',
- right: '5%',
- bottom: '20%',
- top: '10%',
- containLabel: true,
- x: 120
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
+
+ console.log(val)
+ this.chart.setOption(
+ {
+ title: {
+ text: val.text,
+ textStyle: {
+ color: '#000000',
},
- restore: {},
- saveAsImage: {}
- }
- },
- tooltip: {
- trigger: 'axis',
- position: function(pt) {
- return [pt[0], '10%']
- }
- },
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: 'cross'
- // },
- // padding: [5, 10]
- // },
- yAxis: {
- axisTick: {
- show: false // ������������
},
- axisLine: {
- lineStyle: {
- color: '#000000'
- }
- }
+ xAxis: {
+ data: val.xAxis.slice(0, 24),
+ boundaryGap: false,
+ axisTick: {
+ show: false,
+ },
+ // axisTick: { // ������������������������������
+ // alignWithLabel: true,
+ // show: true
+ // },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#000000'
+ // }
+ // },
+ // axisLabel: {
+ // interval: this.interval
+ // }
+ },
+ grid: {
+ left: '5%',
+ right: '5%',
+ top:'5%',
+ containLabel: true,
+ height:fontSize(3.3),
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none',
+ },
+ restore: {},
+ saveAsImage: {},
+ },
+ },
+ tooltip: {
+ trigger: 'axis',
+ position: function (pt) {
+ return [pt[0], '10%']
+ },
+ },
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // type: 'cross'
+ // },
+ // padding: [5, 10]
+ // },
+ yAxis: {
+ axisTick: {
+ show: false, // ������������
+ },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#000000'
+ // }
+ // }
+ },
+ legend: {
+ data: val.title,
+ tooltip: {
+ show: true,
+ },
+ textStyle:{
+ fontSize:fontSize(0.12)
+ },
+ widht:'auto',
+ height:'auto',
+ top: fontSize(4.6),
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 0,
+ end: 100,
+ },
+ {
+ start: 0,
+ end: 20,
+ bottom: fontSize(4.4),
+ height: fontSize(0.5),
+ },
+ ],
+ series: val.series,
+ // [{
+ // name: JSON.parse(JSON.stringify(val.title)),
+ // itemStyle: {
+ // normal: {
+ // color: '#7AC5CD',
+ // lineStyle: {
+ // color: '#7AC5CD',
+ // width: 2
+ // }
+ // }
+ // },
+ // smooth: true,
+ // type: 'line',
+ // data: val.series,
+ // animationDuration: 2800,
+ // animationEasing: 'cubicInOut',
+ // areaStyle: {},
+ // label: {
+ // normal: {
+ // show: true,
+ // position: 'top'
+ // }
+ // }
+ // }]
},
- legend: {
- data: val.title
- },
- // dataZoom: [{
- // type: 'inside',
- // start: 0,
- // end: 100
- // }, {
- // start: 0,
- // end: 10
- // }],
- series: val.series
- // [{
- // name: JSON.parse(JSON.stringify(val.title)),
- // itemStyle: {
- // normal: {
- // color: '#7AC5CD',
- // lineStyle: {
- // color: '#7AC5CD',
- // width: 2
- // }
- // }
- // },
- // smooth: true,
- // type: 'line',
- // data: val.series,
- // animationDuration: 2800,
- // animationEasing: 'cubicInOut',
- // areaStyle: {},
- // label: {
- // normal: {
- // show: true,
- // position: 'top'
- // }
- // }
- // }]
- }, true)
- }
- }
+ true
+ )
+ window.onresize = this.chart.resize;
+ },
+ },
}
</script>
--
Gitblit v1.8.0