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 +++++++++++++++----
src/utils/request.js | 13 --
package-lock.json | 32 ++++++-
package.json | 2
src/views/charts/index.vue | 74 ++++++-----------
5 files changed, 115 insertions(+), 85 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index ea6bc0e..49e55c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5295,11 +5295,19 @@
}
},
"echarts": {
- "version": "4.9.0",
- "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1612592564808&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz",
- "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
+ "version": "5.2.2",
+ "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.2.2.tgz",
+ "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
"requires": {
- "zrender": "4.3.2"
+ "tslib": "2.3.0",
+ "zrender": "5.2.1"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ }
}
},
"editorconfig": {
@@ -18817,9 +18825,19 @@
}
},
"zrender": {
- "version": "4.3.2",
- "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.3.2.tgz",
- "integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
+ "version": "5.2.1",
+ "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.2.1.tgz",
+ "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+ "requires": {
+ "tslib": "2.3.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ }
+ }
}
}
}
diff --git a/package.json b/package.json
index 17a8382..0039fd1 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"crypto-js": "^4.0.0",
"docxtemplater": "^3.32.4",
"docxtemplater-image-module-free": "^1.1.1",
- "echarts": "^4.8.0",
+ "echarts": "^5.2.2",
"element-ui": "^2.15.5",
"esri-leaflet": "^3.0.7",
"file-saver": "^2.0.5",
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: {
diff --git a/src/utils/request.js b/src/utils/request.js
index c372d5d..990473c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,17 +2,8 @@
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
-const baseUrl = 'http://47.99.64.149:8081/'
-// const baseUrl = 'http://120.26.43.34:8081/api/'
-// const baseUrl = 'http://192.168.0.42:8081/' // lzj
-// const baseUrl = 'http://192.168.0.33:8081/' // yy
-// const baseUrl = 'http://192.168.0.25:8081' // jj
-// const baseUrl = 'http://192.168.0.28:8081/'// cjl
-// const baseUrl = 'http://192.168.0.11:8081/' // new swb
-// const baseUrl = 'http://47.96.171.62:8081/'//������������
-// const baseUrl = 'http://121.43.179.139:8080'
-// const baseUrl = 'http://192.168.0.33:8085/'
-// const baseUrl = 'http://192.168.0.33:8081/'
+// const baseUrl = 'http://47.99.64.149:8081/' //������
+const baseUrl = 'http://120.26.43.34:8081/api/' //������
// create an axios instance
const service = axios.create({
diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue
index e24a91d..c89cb1c 100644
--- a/src/views/charts/index.vue
+++ b/src/views/charts/index.vue
@@ -2,27 +2,11 @@
<div style="width: 100%; height: 100%">
<div class="topSelect">
<!-- <el-cascader v-model="newMac" :options="options" clearable change-on-select :props="{ checkStrictly: true }" placeholder="������������" /> -->
- <el-cascader
- v-model="newMac"
- :options="options"
- :props="props"
- collapse-tags
- clearable
- placeholder="������������"
- style="width: 354px"
- />
+ <el-cascader v-model="newMac" :options="options" :props="props" collapse-tags clearable placeholder="������������"
+ style="width: 354px" />
<!-- <div> -->
- <el-select
- v-model="value"
- placeholder="������������"
- style="margin-left: 20px"
- >
- <el-option
- v-for="(item, index) in newSensor"
- :key="index"
- :label="item.label"
- :value="item.value"
- />
+ <el-select v-model="value" placeholder="������������" style="margin-left: 20px">
+ <el-option v-for="(item, index) in newSensor" :key="index" :label="item.label" :value="item.value" />
</el-select>
<!-- </div> -->
<!-- <el-radio-group v-model="radio1" style="margin-left:20px">
@@ -31,25 +15,12 @@
<el-radio-button label="������" />
<el-radio-button label="���������" />
</el-radio-group> -->
- <el-select
- v-model="select1"
- placeholder="���������"
- style="margin-left: 20px; width: 200px"
- >
- <el-option
- v-for="item in options1"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
+ <el-select v-model="select1" placeholder="���������" style="margin-left: 20px; width: 200px">
+ <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
- <component
- :is="dataType"
- style="padding-left: 0; margin-left: 20px; width: 160px"
- @sendPickerChild="showPickerChild"
- class="select11"
- />
+ <component :is="dataType" style="padding-left: 0; margin-left: 20px; width: 160px"
+ @sendPickerChild="showPickerChild" class="select11" />
<!--������������-->
<el-button @click="selectData" class="btn1">������</el-button>
</div>
@@ -140,7 +111,7 @@
medium: '',
isSelect: false,
options1: [
- {
+ {
label: '������������',
value: '������������',
},
@@ -248,13 +219,13 @@
// mounted() {
//
// },
- beforeCreate() {}, // ������������ - ������������
- beforeMount() {}, // ������������ - ������������
- beforeUpdate() {}, // ������������ - ������������
- updated() {}, // ������������ - ������������
- beforeDestroy() {}, // ������������ - ������������
- destroyed() {}, // ������������ - ������������
- activated() {},
+ beforeCreate() { }, // ������������ - ������������
+ beforeMount() { }, // ������������ - ������������
+ beforeUpdate() { }, // ������������ - ������������
+ updated() { }, // ������������ - ������������
+ beforeDestroy() { }, // ������������ - ������������
+ destroyed() { }, // ������������ - ������������
+ activated() { },
// ������������
methods: {
// ������������
@@ -287,7 +258,10 @@
if (lockLength < data[i].deviceData.length) {
newLineChartData.series.push({
data: [],
- // large: true,
+ triggerLineEvent: true,
+ emphasis: {
+ focus: 'series'
+ },
name: '',
type: 'line',
label: {
@@ -300,7 +274,8 @@
newLineChartData.series.push({
data: [],
name: '',
- // large: true,
+ triggerLineEvent: true,
+ emphasis: { focus: 'series' },
type: 'line',
})
}
@@ -393,21 +368,25 @@
display: flex;
margin-bottom: 20px;
padding: 20px 15px 0 15px;
+
span:first-child {
flex: 1;
}
+
div:last-child {
width: 300px;
line-height: 40px;
padding-left: 6px;
}
}
+
.topTitle {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
padding: 0 15px;
}
+
.btn1 {
margin-left: 1%;
height: 40px;
@@ -416,6 +395,7 @@
.select11 {
width: 20% !important;
}
+
/deep/.el-date-editor .el-range-separator {
width: 11%;
}
--
Gitblit v1.8.0