From 7c5c458225e1e6ab32bba352c5efd33c6a78f023 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Tue, 19 Sep 2023 14:52:57 +0800 Subject: [PATCH] fix:监测因子趋势echarts样式修改 --- src/components/Echarts/LineChart2.vue | 79 ++++++++++++++++++++++++++++++--------- 1 files changed, 60 insertions(+), 19 deletions(-) diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue index f260441..5423c18 100644 --- a/src/components/Echarts/LineChart2.vue +++ b/src/components/Echarts/LineChart2.vue @@ -1,4 +1,3 @@ -<<<<<<< HEAD <template> <div :class="className" :style="{ height: height, width: width }" /> </template> @@ -80,7 +79,6 @@ this.setOptions(this.chartData) }, setOptions(val) { - // console.log(val,'123'); function fontSize(res) { let clientWidth = window.innerWidth || @@ -90,8 +88,7 @@ let fontSize = 100 * (clientWidth / 1920) return res * fontSize } - - // console.log('���������������������') + let that = this this.chart.setOption( { title: { @@ -106,18 +103,6 @@ axisTick: { show: true, }, - // axisTick: { // ������������������������������ - // alignWithLabel: true, - // show: true - // }, - // axisLine: { - // lineStyle: { - // color: '#000000' - // } - // }, - // axisLabel: { - // interval: this.interval - // } }, grid: { left: '5%', @@ -136,13 +121,69 @@ }, }, tooltip: { + backgroundColor: 'rgba(50,50,50,0.5)', + borderWidth: '0', trigger: 'axis', - position: function (pt) { - return [pt[1], '-13%'] + formatter: function (a) { + let 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������������������ + 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������������ + + 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: { -- Gitblit v1.8.0