From 076d8685573236fd044bdbcd167b60652e8799cd Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Tue, 19 Sep 2023 17:20:09 +0800 Subject: [PATCH] Merge branch 'feature_1.0' --- src/components/Echarts/LineChart2.vue | 48 ++++++ src/components/Echarts/LineChartSpe.vue | 187 +++++++++++--------------- src/views/contrast/index.vue | 75 ++++------ src/views/averageContrast/index.vue | 60 +++----- 4 files changed, 175 insertions(+), 195 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/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/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; 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