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 | 188 ++++++++++++++++++++++++++++++++++------------
1 files changed, 137 insertions(+), 51 deletions(-)
diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue
index f260441..42a51c9 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>
@@ -7,35 +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
},
chartData: {
type: Object,
- required: true,
+ required: true
},
interval: {
type: Number,
- default: 1,
- },
+ default: 1
+ }
// xdata: {
// type: Array,
// required: true
@@ -43,7 +46,7 @@
},
data() {
return {
- chart: null,
+ chart: null
}
},
watch: {
@@ -51,8 +54,8 @@
deep: true,
handler(val) {
this.setOptions(val)
- },
- },
+ }
+ }
// xdata: {
// deep: true,
// handler(val) {
@@ -80,75 +83,158 @@
this.setOptions(this.chartData)
},
setOptions(val) {
- // console.log(val,'123');
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
}
-
- // console.log('���������������������')
+ 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',
- },
+ color: '#000000'
+ }
},
xAxis: {
data: val.xAxis,
boundaryGap: false,
axisTick: {
- show: true,
- },
- // axisTick: { // ������������������������������
- // alignWithLabel: true,
- // show: true
- // },
- // axisLine: {
- // lineStyle: {
- // color: '#000000'
- // }
- // },
- // axisLabel: {
- // interval: this.interval
- // }
+ 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',
- position: function (pt) {
- return [pt[1], '-13%']
+ 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: false, // ������������
+ show: true // ������������
},
+ axisLine: {
+ show: true // ���������������������
+ },
+ axisLabel: {
+ show: true // ������������������������������
+ }
// axisLine: {
// lineStyle: {
// color: '#000000'
@@ -158,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