From 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229 Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Mon, 12 Dec 2022 13:24:57 +0800
Subject: [PATCH] 1.浑南区走航车报告下载；2.菜单分配可以选择某个子菜单，但必须选择实时风场页面；3.空气质量报告模板更新；
---
src/components/Echarts/LineChart2.vue | 407 +++++++++++++++++++++++++++------------------------------
1 files changed, 191 insertions(+), 216 deletions(-)
diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue
index 2d57a31..1a20857 100644
--- a/src/components/Echarts/LineChart2.vue
+++ b/src/components/Echarts/LineChart2.vue
@@ -1,216 +1,191 @@
-<template>
- <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-// import echarts from 'echarts'
-import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart',
- },
- width: {
- type: String,
- default: '100%',
- },
- height: {
- type: String,
- default: '350px',
- },
- autoResize: {
- type: Boolean,
- default: true,
- },
- chartData: {
- type: Object,
- required: true,
- },
- interval: {
- type: Number,
- default: 1,
- },
- // xdata: {
- // type: Array,
- // required: true
- // }
- },
- data() {
- return {
- chart: null,
- }
- },
- watch: {
- chartData: {
- deep: true,
- handler(val) {
- this.setOptions(val)
- },
- },
- // xdata: {
- // deep: true,
- // handler(val) {
- // console.log(val)
- // this.setOptions(val)
- // console.log('������������')
- // }
- // }
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart()
- })
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
-
- initChart() {
- this.chart = echarts.init(this.$el, 'macarons')
- this.setOptions(this.chartData)
- },
- setOptions(val) {
- function fontSize(res){
- let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
- if (!clientWidth) return;
- let fontSize = 100 * (clientWidth / 1920);
- return res*fontSize;
- }
-
- // console.log('���������������������')
-
- console.log(val)
- this.chart.setOption(
- {
- title: {
- text: val.text,
- textStyle: {
- color: '#000000',
- },
- },
- xAxis: {
- data: val.xAxis.slice(0, 24),
- boundaryGap: false,
- axisTick: {
- show: false,
- },
- // axisTick: { // ������������������������������
- // alignWithLabel: true,
- // show: true
- // },
- // axisLine: {
- // lineStyle: {
- // color: '#000000'
- // }
- // },
- // axisLabel: {
- // interval: this.interval
- // }
- },
- grid: {
- left: '5%',
- right: '5%',
- top:'5%',
- containLabel: true,
- height:fontSize(3.3),
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none',
- },
- restore: {},
- saveAsImage: {},
- },
- },
- tooltip: {
- trigger: 'axis',
- position: function (pt) {
- return [pt[0], '10%']
- },
- },
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: 'cross'
- // },
- // padding: [5, 10]
- // },
- yAxis: {
- axisTick: {
- show: false, // ������������
- },
- // axisLine: {
- // lineStyle: {
- // color: '#000000'
- // }
- // }
- },
- legend: {
- data: val.title,
- tooltip: {
- show: true,
- },
- textStyle:{
- fontSize:fontSize(0.12)
- },
- widht:'auto',
- height:'auto',
- top: fontSize(4.6),
- },
- dataZoom: [
- {
- type: 'inside',
- start: 0,
- end: 100,
- },
- {
- start: 0,
- end: 20,
- bottom: fontSize(4.4),
- height: fontSize(0.5),
- },
- ],
- 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
- )
- window.onresize = this.chart.resize;
- },
- },
-}
-</script>
+<<<<<<< HEAD
+<template>
+ <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+// import echarts from 'echarts'
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: 'chart',
+ },
+ width: {
+ type: String,
+ default: '100%',
+ },
+ height: {
+ type: String,
+ default: '350px',
+ },
+ autoResize: {
+ type: Boolean,
+ default: true,
+ },
+ chartData: {
+ type: Object,
+ required: true,
+ },
+ interval: {
+ type: Number,
+ default: 1,
+ },
+ // xdata: {
+ // type: Array,
+ // required: true
+ // }
+ },
+ data() {
+ return {
+ chart: null,
+ }
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val)
+ },
+ },
+ // xdata: {
+ // deep: true,
+ // handler(val) {
+ // console.log(val)
+ // this.setOptions(val)
+ // console.log('������������')
+ // }
+ // }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el, 'macarons')
+ this.setOptions(this.chartData)
+ },
+ setOptions(val) {
+ function fontSize(res) {
+ let clientWidth =
+ window.innerWidth ||
+ document.documentElement.clientWidth ||
+ document.body.clientWidth
+ if (!clientWidth) return
+ let fontSize = 100 * (clientWidth / 1920)
+ return res * fontSize
+ }
+
+ // console.log('���������������������')
+ this.chart.setOption(
+ {
+ title: {
+ text: val.text,
+ textStyle: {
+ color: '#000000',
+ },
+ },
+ xAxis: {
+ data: val.xAxis,
+ boundaryGap: false,
+ axisTick: {
+ show: true,
+ },
+ // axisTick: { // ������������������������������
+ // alignWithLabel: true,
+ // show: true
+ // },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#000000'
+ // }
+ // },
+ // axisLabel: {
+ // interval: this.interval
+ // }
+ },
+ grid: {
+ 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[1], '-13%']
+ },
+ textStyle: {
+ fontSize: fontSize(0.117), // ������������
+ },
+ },
+
+ yAxis: {
+ axisTick: {
+ show: false, // ������������
+ },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#000000'
+ // }
+ // }
+ },
+ legend: {
+ data: val.title,
+ tooltip: {
+ show: true,
+ },
+ textStyle: {
+ fontSize: fontSize(0.15),
+ },
+ widht: 'auto',
+ height: 'auto',
+ top: fontSize(5.5),
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 0,
+ end: 100,
+ },
+ {
+ start: 0,
+ end: 20,
+ top: fontSize(4.8),
+ height: fontSize(0.5),
+ },
+ ],
+ series: val.series,
+ },
+ true
+ )
+ window.onresize = this.chart.resize
+ },
+ },
+}
+</script>
+
--
Gitblit v1.8.0