From 992290c01190defffd1091049e418ea2985322ca Mon Sep 17 00:00:00 2001
From: cjl <276999030@qq.com>
Date: Thu, 13 Jul 2023 20:27:00 +0800
Subject: [PATCH] chore
---
src/components/Echarts/LineChartSpe.vue | 265 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 161 insertions(+), 104 deletions(-)
diff --git a/src/components/Echarts/LineChartSpe.vue b/src/components/Echarts/LineChartSpe.vue
index 9b76491..0adc342 100644
--- a/src/components/Echarts/LineChartSpe.vue
+++ b/src/components/Echarts/LineChartSpe.vue
@@ -1,7 +1,7 @@
<template>
<!-- <div> -->
<!-- <div>1111111111111111111111111111111111111111</div> -->
- <div :class="className" :style="{height:height,width:width}" />
+ <div :class="className" :style="{ height: height, width: width }" />
<!-- </div> -->
</template>
@@ -15,24 +15,24 @@
props: {
className: {
type: String,
- default: 'chart'
+ default: 'chart',
},
width: {
type: String,
- default: '100%'
+ default: '100%',
},
height: {
type: String,
- default: '350px'
+ default: '350px',
},
autoResize: {
type: Boolean,
- default: true
+ default: true,
},
chartData: {
type: Object,
- required: true
- }
+ required: true,
+ },
// xdata: {
// type: Array,
// required: true
@@ -40,16 +40,16 @@
},
data() {
return {
- chart: null
+ chart: null,
}
},
watch: {
chartData: {
- deep: true,
handler(val) {
this.setOptions(val)
- }
- }
+ },
+ deep: true,
+ },
},
mounted() {
this.$nextTick(() => {
@@ -69,102 +69,159 @@
this.setOptions(this.chartData)
},
setOptions(val) {
- this.chart.setOption({
- xAxis: {
- data: val.xAxis,
- boundaryGap: false,
- axisTick: {
- show: false
- }
- },
- grid: {
- left: 10,
- right: 10,
- bottom: 20,
- top: 30,
- containLabel: true
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
+ function fontSize(res) {
+ let clientWidth =
+ window.innerWidth ||
+ document.documentElement.clientWidth ||
+ document.body.clientWidth
+ if (!clientWidth) return
+ let fontSize = 100 * (clientWidth / 1920)
+ return res * fontSize
+ }
+ this.chart.setOption(
+ {
+ xAxis: {
+ data: val.xAxis,
+ boundaryGap: true,
+ axisTick: {
+ show: true,
},
- restore: {},
- saveAsImage: {}
- }
- },
- // tooltip: {
- // trigger: 'axis',
- // position: function(pt) {
- // return [pt[0], '10%']
- // }
- // },
- tooltip: {
- trigger: 'axis',
- position: function(pt) {
- return [pt[0], '10%']
+
},
- formatter(params) {
- for (let i = 0; i < params.length; i++) {
- return params[i].seriesName + ':' + ' ' + params[i].data.data0
- }
- }
- },
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: 'cross'
- // },
- // padding: [5, 10]
- // },
- yAxis: {
- axisLabel: {
- show: false
- }
- },
- legend: {
- icon: 'circle',
- itemHeight: 15,
- // textStyle: {
- // fontSize: 18
+ grid: {
+ left: 100,
+ right: 10,
+ bottom: 20,
+ top: 30,
+ height: fontSize(4),
+ width: fontSize(15),
+ containLabel: true,
+ },
+ // toolbox: {
+ // feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none',
+ // },
+ // restore: {},
+ // saveAsImage: {},
+ // },
// },
- data: val.title
+ // 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
+ // },
+ },
+
+ yAxis: [
+ {
+ type: 'value',
+ position: 'left',
+ axisLabel: {
+ show: true,
+ },
+ },
+ {
+ type: 'value',
+ position: 'right',
+ axisLabel: {
+ 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,
+ },
+ ],
+ legend: {
+ icon: 'circle',
+ itemHeight: 15,
+ // textStyle: {
+ // fontSize: 18
+ // },
+ data: val.title,
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 0,
+ end: 100,
+ },
+ {
+ start: 0,
+ end: 10,
+ 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'
+ // }
+ // }
+ // }]
},
- dataZoom: [{
- type: 'inside',
- start: 0,
- end: 100
- }, {
- start: 0,
- end: 10
- }],
- 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'
- // }
- // }
- // }]
- }, true)
- }
- }
+ true
+ )
+ },
+ },
}
</script>
--
Gitblit v1.8.0