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 | 121 ++++++++++++++++++++-------------------- 1 files changed, 60 insertions(+), 61 deletions(-) diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue index d32faf0..42a51c9 100644 --- a/src/components/Echarts/LineChart2.vue +++ b/src/components/Echarts/LineChart2.vue @@ -6,39 +6,39 @@ // import echarts from 'echarts' import * as echarts from 'echarts' require('echarts/theme/macarons') // echarts theme -import resize from './mixins/resize' +// import resize from './mixins/resize' export default { - mixins: [resize], + // mixins: [resize], 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 }, isMouse: { type: Boolean, - default: false, + default: false }, chartData: { type: Object, - required: true, + required: true }, interval: { type: Number, - default: 1, - }, + default: 1 + } // xdata: { // type: Array, // required: true @@ -46,7 +46,7 @@ }, data() { return { - chart: null, + chart: null } }, watch: { @@ -54,8 +54,8 @@ deep: true, handler(val) { this.setOptions(val) - }, - }, + } + } // xdata: { // deep: true, // handler(val) { @@ -84,17 +84,17 @@ }, setOptions(val) { function fontSize(res) { - let clientWidth = + const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth if (!clientWidth) return - let fontSize = 100 * (clientWidth / 1920) + const fontSize = 100 * (clientWidth / 1920) return res * fontSize } - let that = this + const that = this if (this.isMouse) { - this.chart.on('mouseover', function (params) { + this.chart.on('mouseover', function(params) { that.chart.setOption({ series: [ { @@ -110,7 +110,7 @@ }) }) // ���������������mouseout������������������������ - this.chart.on('mouseout', function (params) { + this.chart.on('mouseout', function(params) { that.chart.setOption({ series: [ { @@ -134,38 +134,38 @@ title: { text: val.text, textStyle: { - color: '#000000', - }, + color: '#000000' + } }, xAxis: { data: val.xAxis, boundaryGap: false, axisTick: { - show: true, - }, + show: true + } }, grid: { left: '5%', right: '5%', top: '5%', containLabel: true, - height: fontSize(4.3), + height: fontSize(4.3) }, toolbox: { feature: { dataZoom: { - yAxisIndex: 'none', + yAxisIndex: 'none' }, restore: {}, - saveAsImage: {}, - }, + saveAsImage: {} + } }, tooltip: { backgroundColor: 'rgba(50,50,50,0.5)', borderWidth: '0', trigger: 'axis', - formatter: function (a) { - let list = [] + formatter: function(a) { + const list = [] let listItem = '' for (var i = 0; i < a.length; i++) { list.push( @@ -184,34 +184,33 @@ 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������������������ - let x = point[0];// - let y = point[1]; - let viewWidth = size.viewSize[0]; - let viewHeight = size.viewSize[1]; - let boxWidth = size.contentSize[0]; - let boxHeight = size.contentSize[1]; - let posX = 0;//x������������ - let posY = 0;//y������������ + 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 (x < boxWidth) { // ��������������� + posX = 5 + } else { // ��������������� + posX = x - boxWidth } - if (y < boxHeight) {//��������������� - posY = 5; - } else {//��������������� - posY = y - boxHeight; + if (y < boxHeight) { // ��������������� + posY = 5 + } else { // ��������������� + posY = y - boxHeight } if (params && params.length > 20) { posX = point[1], - posY = '-10%'; + posY = '-10%' } - return [posX, posY]; - + return [posX, posY] }, axisPointer: { type: 'cross', @@ -228,13 +227,13 @@ yAxis: { axisTick: { - show: true, // ������������ + show: true // ������������ }, axisLine: { - show: true, //��������������������� + show: true // ��������������������� }, axisLabel: { - show: true, //������������������������������ + show: true // ������������������������������ } // axisLine: { // lineStyle: { @@ -245,35 +244,35 @@ legend: { data: val.title, tooltip: { - show: true, + show: true }, textStyle: { - fontSize: fontSize(0.15), + fontSize: fontSize(0.15) }, widht: 'auto', height: 'auto', - top: fontSize(5.5), + top: fontSize(5.5) }, dataZoom: [ { type: 'inside', start: 0, - end: 100, + end: 100 }, { start: 0, end: 20, top: fontSize(4.8), - height: fontSize(0.5), - }, + height: fontSize(0.5) + } ], - series: val.series, + series: val.series }, true ) window.onresize = this.chart.resize - }, - }, + } + } } </script> -- Gitblit v1.8.0