From 2c6d91d758241e1f97fe2790d92b754ea2cc860c Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 28 Mar 2024 15:59:25 +0800
Subject: [PATCH] fix: 空气质量日报表显示
---
src/components/Echarts/LineChartSpe.vue | 178 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 92 insertions(+), 86 deletions(-)
diff --git a/src/components/Echarts/LineChartSpe.vue b/src/components/Echarts/LineChartSpe.vue
index df84764..a7f10d6 100644
--- a/src/components/Echarts/LineChartSpe.vue
+++ b/src/components/Echarts/LineChartSpe.vue
@@ -1,17 +1,20 @@
<template>
<!-- <div> -->
<!-- <div>1111111111111111111111111111111111111111</div> -->
- <div :class="className" :style="{ height: height, width: width }" />
+ <div
+ :class="className"
+ :style="{ height: height, width: width }"
+ />
<!-- </div> -->
</template>
<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+import * as echarts from 'echarts' // echarts theme
+// import resize from './mixins/resize'
+require('echarts/theme/macarons')
export default {
- mixins: [resize],
+ // mixins: [resize],
props: {
className: {
type: String,
@@ -38,27 +41,25 @@
// required: true
// }
},
- data() {
+ data () {
return {
chart: null,
}
},
watch: {
chartData: {
-
- handler(val) {
+ handler (val) {
this.setOptions(val)
},
- deep: true,
-
+ deep: true
},
},
- mounted() {
+ mounted () {
this.$nextTick(() => {
this.initChart()
})
},
- beforeDestroy() {
+ beforeDestroy () {
if (!this.chart) {
return
}
@@ -66,12 +67,21 @@
this.chart = null
},
methods: {
- initChart() {
+ initChart () {
this.chart = echarts.init(this.$el, 'macarons')
- this.setOptions(this.chartData)
+ this.chart.clear()
+ // this.setOptions(this.chartData)
},
- setOptions(val) {
- function fontSize(res) {
+ setOptions (val) {
+ console.log('val,val', val)
+ // val.series.forEach(element => {
+ // element.data = element.data.map(item => item === 0 ? 0.1 : item)
+ // })
+ if (this.chart) {
+ this.chart.clear()
+ }
+ let that = this
+ function fontSize (res) {
let clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
@@ -80,65 +90,85 @@
let fontSize = 100 * (clientWidth / 1920)
return res * fontSize
}
+ /**
+ * ���������������mouseover������������������������������
+ * ������������������ ������������������������������������������������������������
+ * ���������������������������������������������������������������������������
+ * ������������������������series���������������������������������
+ * ������params������������������������������
+ */
+ this.chart.on('mouseover', function (params) {
+ that.chart.setOption({
+ series: [
+ {
+ name: params.seriesName,
+ label: {
+ show: true,
+ fontSize: 16,
+ position: [10, -15],
+ formatter: '{c}'
+ }
+ }
+ ]
+ })
+ })
+ // ���������������mouseout������������������������
+ this.chart.on('mouseout', function (params) {
+ that.chart.setOption({
+ series: [
+ {
+ name: params.seriesName,
+ lineStyle: {
+ width: 2
+ },
+ label: {
+ show: false
+ },
+ endLabel: {
+ show: false
+ }
+ }
+ ]
+ })
+ })
this.chart.setOption(
{
xAxis: {
data: val.xAxis,
- boundaryGap: true,
+ boundaryGap: false,
axisTick: {
show: true,
},
+
},
grid: {
- left: 10,
- right: 10,
- bottom: 20,
- top: 30,
- height: fontSize(3.5),
+ left: '5%',
+ right: '5%',
+ top: '5%',
containLabel: true,
+ height: fontSize(4.3),
},
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none',
- },
- restore: {},
- saveAsImage: {},
- },
- },
- // tooltip: {
- // trigger: 'axis',
- // position: function(pt) {
- // return [pt[0], '10%']
- // }
- // },
tooltip: {
trigger: 'axis',
- position: function (pt) {
- return [pt[0], '10%']
- },
- // formatter(params) {
- // console.log(params,'ssss');
- // let data=[]
- // for (let i = 0; i < params.length; i++) {
- // data+=params[i].seriesName + ' :' +'  '+params[i].value+ '<br/>'
- // }
- // return data
- // },
+ backgroundColor: 'rgba(50,50,50,0.5)',
+ textStyle: {
+ color: 'rgb(255, 255, 255);',
+ fontSize: fontSize(0.117), // ������������
+ lineHeight: 0
+ }
},
-
- yAxis: {
- axisLabel: {
- show: false,
- },
- },
+ yAxis: val.yAxis,
legend: {
- icon: 'circle',
- itemHeight: 15,
- // textStyle: {
- // fontSize: 18
- // },
data: val.title,
+ tooltip: {
+ show: true,
+ },
+ textStyle: {
+ fontSize: fontSize(0.15),
+ },
+ widht: 'auto',
+ height: 'auto',
+ top: fontSize(5.5),
},
dataZoom: [
{
@@ -149,39 +179,15 @@
{
start: 0,
end: 10,
- top:fontSize(4),
+ top: fontSize(4.5),
height: fontSize(0.4),
},
-
],
- 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'
- // }
- // }
- // }]
+ series: val.series
},
true
)
+ // window.onresize = this.chart.resize
},
},
}
--
Gitblit v1.8.0