From 64b642cfbe4f34706ed40af77e51079ddf919d54 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 13 Oct 2023 16:52:43 +0800
Subject: [PATCH] fix:查询修改和表格添加
---
src/components/Echarts/LineChartSpe.vue | 192 +++++++++++++++++++----------------------------
1 files changed, 78 insertions(+), 114 deletions(-)
diff --git a/src/components/Echarts/LineChartSpe.vue b/src/components/Echarts/LineChartSpe.vue
index eca1e94..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,110 +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(3.5),
- 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: [
{
@@ -192,38 +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