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/LineChart2.vue | 494 ++++++++++++++++++++++++++++++------------------------
1 files changed, 278 insertions(+), 216 deletions(-)
diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue
index 2d57a31..42a51c9 100644
--- a/src/components/Echarts/LineChart2.vue
+++ b/src/components/Echarts/LineChart2.vue
@@ -1,216 +1,278 @@
-<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>
+<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
+ },
+ isMouse: {
+ type: Boolean,
+ default: false
+ },
+ 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) {
+ const clientWidth =
+ window.innerWidth ||
+ document.documentElement.clientWidth ||
+ document.body.clientWidth
+ if (!clientWidth) return
+ const fontSize = 100 * (clientWidth / 1920)
+ return res * fontSize
+ }
+ const 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: {
+ text: val.text,
+ textStyle: {
+ color: '#000000'
+ }
+ },
+ xAxis: {
+ data: val.xAxis,
+ boundaryGap: false,
+ axisTick: {
+ show: true
+ }
+ },
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '5%',
+ containLabel: true,
+ height: fontSize(4.3)
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ tooltip: {
+ backgroundColor: 'rgba(50,50,50,0.5)',
+ borderWidth: '0',
+ trigger: 'axis',
+ formatter: function(a) {
+ const list = []
+ let listItem = ''
+ for (var i = 0; i < a.length; i++) {
+ list.push(
+ '<span style="display: inline-block;padding: 0px 0;" >' +
+ '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
+ a[i].color +
+ ';border-radius: 50%;}"></i><span style="width:15px; display:inline-block;">' +
+ '</span>' +
+ a[i].seriesName +
+ '    ' +
+ a[i].value +
+ '</span>'
+ )
+ }
+ listItem = list.join('<br/>')
+ return ' <div div style = "width:15px; display:inline-block;" > ' + a[0].name +
+ '</div>' + '<div style="padding:0px;">' + listItem + '</div>'
+ },
+ position: function(point, params, dom, rect, size) {
+ // ������point���������������������������size���������������������viewSize���contentSize������������������div���tooltip������������������
+ const x = point[0]//
+ const y = point[1]
+ const viewWidth = size.viewSize[0]
+ const viewHeight = size.viewSize[1]
+ const boxWidth = size.contentSize[0]
+ const boxHeight = size.contentSize[1]
+ let posX = 0// x������������
+ let posY = 0// y������������
+
+ if (x < boxWidth) { // ���������������
+ posX = 5
+ } else { // ���������������
+ posX = x - boxWidth
+ }
+
+ if (y < boxHeight) { // ���������������
+ posY = 5
+ } else { // ���������������
+ posY = y - boxHeight
+ }
+ if (params && params.length > 20) {
+ posX = point[1],
+ posY = '-10%'
+ }
+ return [posX, posY]
+ },
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ },
+ textStyle: {
+ color: 'rgb(255, 255, 255);',
+ fontSize: fontSize(0.117), // ������������
+ lineHeight: 0
+ }
+ },
+
+ yAxis: {
+ axisTick: {
+ show: true // ������������
+ },
+ axisLine: {
+ show: true // ���������������������
+ },
+ axisLabel: {
+ show: true // ������������������������������
+ }
+ // 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