From 19084af0e992b8ae20a8abe1c338f06edfd55eb0 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 19 Sep 2023 16:30:41 +0800
Subject: [PATCH] fix:监测因子趋势相关性对比echarts样式修改
---
src/components/Echarts/LineChartSpe.vue | 187 +++++++++++++++----------------------
src/views/contrast/index.vue | 75 +++++---------
2 files changed, 106 insertions(+), 156 deletions(-)
diff --git a/src/components/Echarts/LineChartSpe.vue b/src/components/Echarts/LineChartSpe.vue
index 0adc342..3f35afa 100644
--- a/src/components/Echarts/LineChartSpe.vue
+++ b/src/components/Echarts/LineChartSpe.vue
@@ -6,7 +6,7 @@
</template>
<script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
@@ -48,7 +48,7 @@
handler(val) {
this.setOptions(val)
},
- deep: true,
+ deep: true
},
},
mounted() {
@@ -66,9 +66,11 @@
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
+ this.chart.clear()
this.setOptions(this.chartData)
},
setOptions(val) {
+ let that = this
function fontSize(res) {
let clientWidth =
window.innerWidth ||
@@ -78,107 +80,95 @@
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: 100,
- right: 10,
- bottom: 20,
- top: 30,
- height: fontSize(4),
- width: fontSize(15),
+ 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: [
- {
- type: 'value',
- position: 'left',
- axisLabel: {
- show: true,
- },
+ yAxis: {
+ axisTick: {
+ show: true, // ������������
},
- {
- type: 'value',
- position: 'right',
- axisLabel: {
- show: true,
- },
+ axisLine: {
+ show: true, //���������������������
},
- {
- type: 'value',
- position: 'right',
- offset: 50,
- axisLabel: {
- show: true,
- },
- min: 'dataMin', //���������������������������
- max: 'dataMax', //���������������������������
- min: function (value) {
- //���������������������������������������
- return Math.floor(value.min)
- },
- max: function (value) {
- //���������������������������������������
- return Math.ceil(value.max)
- },
-
- scale: true, //���������
- minInterval: 0.1, //������������
- },
- {
- type: 'value',
- position: 'left',
- axisLabel: {
- show: true,
- },
- offset: 50,
- },
- ],
+ axisLabel: {
+ show: true, //������������������������������
+ }
+ },
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: [
{
@@ -193,34 +183,11 @@
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
},
},
}
diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue
index 330f7ff..ebe8eb3 100644
--- a/src/views/contrast/index.vue
+++ b/src/views/contrast/index.vue
@@ -1,22 +1,9 @@
-+<template>
+<template>
<div style="width: 100%; height: 100%; margin:0 auto">
<div class="topSelect">
- <el-cascader
- v-model="newMac"
- :options="options"
- clearable
- placeholder="������������"
- style="width: 354px"
- />
- <el-cascader
- v-model="value"
- :options="newSensor"
- :props="props"
- collapse-tags
- clearable
- placeholder="������������"
- style="margin-left: 20px"
- />
+ <el-cascader v-model="newMac" :options="options" clearable placeholder="������������" style="width: 354px" />
+ <el-cascader v-model="value" :options="newSensor" :props="props" collapse-tags clearable placeholder="������������"
+ style="margin-left: 20px" />
<!-- <el-select v-model="value" placeholder="������������">
<el-option
v-for="item in newSensor"
@@ -31,25 +18,12 @@
<!-- <el-radio-button label="������" />
<el-radio-button label="���������" /> -->
<!-- </el-radio-group> -->
- <el-select
- v-model="radio1"
- placeholder="���������"
- style="margin-left: 20px"
- >
- <el-option
- v-for="item in options1"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
+ <el-select v-model="radio1" placeholder="���������" style="margin-left: 20px">
+ <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
- <component
- :is="dataType"
- class="select11"
- style="padding-left: 0; margin-left: 20px; width: 160px"
- @sendPickerChild="showPickerChild"
- />
+ <component :is="dataType" class="select11" style="padding-left: 0; margin-left: 20px; width: 160px"
+ @sendPickerChild="showPickerChild" />
<!--������������-->
<el-button @click="selectData" class="btn1">������</el-button>
</div>
@@ -57,7 +31,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: 40rem;"/>
+ <LineChart :chart-data="lineChartData" style="height: 40rem;" />
</div>
</template>
@@ -197,14 +171,14 @@
this.getData()
},
// ������������ - ��������������������������� DOM ���������
- mounted() {},
- beforeCreate() {}, // ������������ - ������������
- beforeMount() {}, // ������������ - ������������
- beforeUpdate() {}, // ������������ - ������������
- updated() {}, // ������������ - ������������
- beforeDestroy() {}, // ������������ - ������������
- destroyed() {}, // ������������ - ������������
- activated() {},
+ mounted() { },
+ beforeCreate() { }, // ������������ - ������������
+ beforeMount() { }, // ������������ - ������������
+ beforeUpdate() { }, // ������������ - ������������
+ updated() { }, // ������������ - ������������
+ beforeDestroy() { }, // ������������ - ������������
+ destroyed() { }, // ������������ - ������������
+ activated() { },
// ������������
methods: {
// ������������������������
@@ -274,7 +248,7 @@
series: [],
xAxis: [],
title: [],
- yAxis:[]
+ yAxis: []
}
this.newXData = []
this.$request({
@@ -300,12 +274,15 @@
newLineChartData.xAxis.push(data[0].timeValueList[i].time)
}
for (var i = 0; i < data.length; i++) {
- newLineChartData.series.push({ data: [], name: '', type: 'line' ,yAxisIndex:data[i].code,lineStyle:{width:4}})
+ newLineChartData.series.push({
+ data: [], name: '', type: 'line', triggerLineEvent: true,
+ emphasis: { focus: 'series' }, lineStyle: { width: 4 }
+ })
// newLineChartData.yAxis.push({})
newLineChartData.series[i].name = data[i].name
newLineChartData.title.push(data[i].name);
for (var j = 0; j < data[i].timeValueList.length; j++) {
- newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
+ newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
}
}
this.lineChartData = newLineChartData
@@ -502,28 +479,34 @@
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;
}
+
.select11 {
width: 20% !important;
}
+
/deep/.el-date-editor .el-range-separator {
width: 11%;
}
--
Gitblit v1.8.0