From 4f4b934d1d570b19152b69765c8cb592546dd09c Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 19 Sep 2023 16:49:55 +0800
Subject: [PATCH] fix:监测因子趋势均值对比echarts样式修改
---
src/components/Echarts/LineChart2.vue | 48 +++++++++++++++++++++++
src/views/averageContrast/index.vue | 60 +++++++++++-------------------
2 files changed, 69 insertions(+), 39 deletions(-)
diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue
index 5423c18..d32faf0 100644
--- a/src/components/Echarts/LineChart2.vue
+++ b/src/components/Echarts/LineChart2.vue
@@ -27,6 +27,10 @@
type: Boolean,
default: true,
},
+ isMouse: {
+ type: Boolean,
+ default: false,
+ },
chartData: {
type: Object,
required: true,
@@ -89,6 +93,42 @@
return res * fontSize
}
let that = this
+ if (this.isMouse) {
+ 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(
{
title: {
@@ -188,8 +228,14 @@
yAxis: {
axisTick: {
- show: false, // ������������
+ show: true, // ������������
},
+ axisLine: {
+ show: true, //���������������������
+ },
+ axisLabel: {
+ show: true, //������������������������������
+ }
// axisLine: {
// lineStyle: {
// color: '#000000'
diff --git a/src/views/averageContrast/index.vue b/src/views/averageContrast/index.vue
index 508984d..ae7f421 100644
--- a/src/views/averageContrast/index.vue
+++ b/src/views/averageContrast/index.vue
@@ -1,39 +1,16 @@
<template>
<div style="width: 100%">
<div class="topSelect">
- <el-cascader
- v-model="newMac"
- :options="options"
- clearable
- placeholder="������������"
- style="width: 354px"
- />
- <el-select
- v-model="value"
- placeholder="������������"
- style="margin-left: 20px"
- >
- <el-option
- v-for="item in newSensor"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
+ <el-cascader v-model="newMac" :options="options" clearable placeholder="������������" style="width: 354px" />
+ <el-select v-model="value" placeholder="������������" style="margin-left: 20px">
+ <el-option v-for="item in newSensor" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<!-- <el-radio-group v-model="radio1" style="margin-left:20px">
<el-radio-button label="������" />
<el-radio-button label="������" />
</el-radio-group> -->
- <el-date-picker
- v-model="timevalue"
- type="datetimerange"
- range-separator="���"
- value-format="yyyy-MM-dd HH"
- start-placeholder="������������"
- :picker-options="pickerOptions"
- end-placeholder="������������"
- style="margin-left: 1rem"
- >
+ <el-date-picker v-model="timevalue" type="datetimerange" range-separator="���" value-format="yyyy-MM-dd HH"
+ start-placeholder="������������" :picker-options="pickerOptions" end-placeholder="������������" style="margin-left: 1rem">
</el-date-picker>
<!--������������-->
<el-button @click="selectData" class="btn1">������</el-button>
@@ -46,7 +23,7 @@
<div style="position:absolute">(������:ug/m��)</div>
<div style="text-align: center;width: 100%;">{{ newData }}��{{ newMac?newMac[0]:'' }}��{{ newMac?newMac[newMac.length - 1][0]:'' }}��{{ value |sensorFilter }}�����������</div>
</div> -->
- <LineChart :chart-data="lineChartData" style="height: 30rem" />
+ <LineChart :chart-data="lineChartData" :isMouse="true" style="height: 30rem" />
</div>
</template>
@@ -199,14 +176,14 @@
this.getData()
},
// ������������ - ��������������������������� DOM ���������
- mounted() {},
- beforeCreate() {}, // ������������ - ������������
- beforeMount() {}, // ������������ - ������������
- beforeUpdate() {}, // ������������ - ������������
- updated() {}, // ������������ - ������������
- beforeDestroy() {}, // ������������ - ������������
- destroyed() {}, // ������������ - ������������
- activated() {},
+ mounted() { },
+ beforeCreate() { }, // ������������ - ������������
+ beforeMount() { }, // ������������ - ������������
+ beforeUpdate() { }, // ������������ - ������������
+ updated() { }, // ������������ - ������������
+ beforeDestroy() { }, // ������������ - ������������
+ destroyed() { }, // ������������ - ������������
+ activated() { },
// ������������
methods: {
// ������������������������
@@ -301,7 +278,10 @@
// }
// }
for (let i = 0; i < 3; i++) {
- newLineChartData.series.push({ data: [], name: '', type: 'line' })
+ newLineChartData.series.push({
+ data: [], name: '', type: 'line', triggerLineEvent: true,
+ emphasis: { focus: 'series' }
+ })
for (let j = 0; j < data.length; j++) {
newLineChartData.series[i].data.push(data[j].values[i])
newLineChartData.series[i].name = this.seriesName[i]
@@ -395,21 +375,25 @@
display: flex;
margin-bottom: 20px;
padding: 20px 15px 0 15px;
+
span:first-child {
flex: 1;
}
+
div:last-child {
width: 300px;
line-height: 40px;
padding-left: 6px;
}
}
+
.topTitle {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
padding: 0 15px;
}
+
.btn1 {
margin-left: 1%;
height: 40px;
--
Gitblit v1.8.0