From 19a4741002f4208bf7fc951cbf3219897af5699a Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期四, 26 十月 2023 16:41:22 +0800
Subject: [PATCH] 标绘查询修改
---
src/components/BarGraph.vue | 143 ++++++++++++++++++++++++++++++-----------------
1 files changed, 92 insertions(+), 51 deletions(-)
diff --git a/src/components/BarGraph.vue b/src/components/BarGraph.vue
index 72e0d0b..b1d5c64 100644
--- a/src/components/BarGraph.vue
+++ b/src/components/BarGraph.vue
@@ -1,11 +1,6 @@
<template>
- <div class="title">
- {{ layerData.layerName }}
- </div>
- <div
- :id="`myEcharts${chartsId}`"
- :style="{ width: width, height: height }"
- ></div>
+ <div class="title">{{ layerData.layerName }}</div>
+ <div id="myEcharts" :style="{ width: width, height: height }"></div>
</template>
<script lang="ts" setup>
import {
@@ -27,7 +22,6 @@
width: String,
height: String,
layerData: Object,
- chartsId: String,
});
let myEcharts = echarts;
let seriesData = ref([]);
@@ -35,6 +29,8 @@
let dataLength;
let data = [];
let isshow = ref(true);
+let myChart = null;
+let optionData = [];
watch(
() => props.layerData,
(nVal, oVal) => {
@@ -43,26 +39,24 @@
xAxisData.value.push(e.len);
});
data = trans(props.layerData.points);
- console.log(data);
+ optionData = props.layerData.points;
seriesData.value = [];
+
data.forEach((e) => {
seriesData.value.push({
data: e,
type: "line",
smooth: true,
symbol: "none", //鍙栨秷鎶樼偣鍦嗗湀
- itemStyle: {
- normal: {
- label: {
- show: false,
- position: "top",
- formatter: "{c}",
- },
+ label: {
+ label: {
+ show: false,
+ position: "top",
+ formatter: "{c}",
},
},
});
});
- console.log(seriesData.value);
nextTick(() => {
initChart();
@@ -73,31 +67,33 @@
onMounted(() => {
// console.log(props.layerData);
xAxisData.value = [];
- props.layerData.points.forEach((e, i) => {
- xAxisData.value.push(e.len);
- });
- data = trans(props.layerData.points);
- seriesData.value = [];
- data.forEach((e) => {
- seriesData.value.push({
- data: e,
- type: "line",
- smooth: true,
- symbol: "none", //鍙栨秷鎶樼偣鍦嗗湀
- itemStyle: {
- normal: {
+ if (props.layerData && props.layerData.points) {
+ props.layerData.points.forEach((e, i) => {
+ xAxisData.value.push(e.len);
+ });
+ data = trans(props.layerData.points);
+ optionData = props.layerData.points;
+ seriesData.value = [];
+ data.forEach((e) => {
+ seriesData.value.push({
+ data: e,
+ type: "line",
+ smooth: true,
+
+ label: {
label: {
show: false,
position: "top",
formatter: "{c}",
},
},
- },
+ });
});
- });
- nextTick(() => {
- initChart();
- });
+
+ nextTick(() => {
+ initChart();
+ });
+ }
});
onUnmounted(() => {
@@ -117,11 +113,18 @@
return result;
}
function initChart() {
- let chart = myEcharts.init(
- document.getElementById(`myEcharts${props.chartsId}`),
+ if (myChart) {
+ myChart.clear();
+ }
+ var valXData = [];
+ xAxisData.value.filter((rs) => {
+ valXData.push((parseFloat(rs) / 1000).toFixed(3));
+ });
+ myChart = myEcharts.init(
+ document.getElementById(`myEcharts`),
"purple-passion"
);
- chart.setOption({
+ myChart.setOption({
// title: {
// text: props.layerData.layerName,
// left: "center",
@@ -142,18 +145,19 @@
// data: xAxisData.value,
},
xAxis: {
- name: "绫筹紙m锛�",
+ name: "鍗冪背",
type: "category",
- data: xAxisData.value,
- show: false, // 涓嶆樉绀哄潗鏍囪酱绾裤�佸潗鏍囪酱鍒诲害绾垮拰鍧愭爣杞翠笂鐨勬枃瀛�
+ data: valXData,
+ show: true, // 涓嶆樉绀哄潗鏍囪酱绾裤�佸潗鏍囪酱鍒诲害绾垮拰鍧愭爣杞翠笂鐨勬枃瀛�
axisTick: {
- show: false, // 涓嶆樉绀哄潗鏍囪酱鍒诲害绾�
+ show: true, // 涓嶆樉绀哄潗鏍囪酱鍒诲害绾�
},
+
axisLine: {
- show: false, // 涓嶆樉绀哄潗鏍囪酱绾�
+ show: true, // 涓嶆樉绀哄潗鏍囪酱绾�
},
axisLabel: {
- show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ show: true, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
showMinLabel: true, // 寮哄埗鏄剧ず鏈�灏忓�兼爣绛�
showMaxLabel: true, // 寮哄埗鏄剧ず鏈�澶у�兼爣绛�
},
@@ -169,28 +173,65 @@
backgroundColor: "#6a7985",
},
},
- formatter: "鏁板�硷細{c} <br> 璺濈锛歿b}m", //{a}锛堢郴鍒楀悕绉帮級锛寋b}锛堟暟鎹」鍚嶇О锛夛紝{c}锛堟暟鍊硷級, {d}锛堢櫨鍒嗘瘮锛�
+
+ // formatter: "鏁板�硷細{c} <br> 璺濈锛歿b}m", //{a}锛堢郴鍒楀悕绉帮級锛寋b}锛堟暟鎹」鍚嶇О锛夛紝{c}锛堟暟鍊硷級, {d}锛堢櫨鍒嗘瘮锛�
+ formatter: (result) => {
+ var val = result[0];
+ if (optionData) {
+ for (var i in optionData) {
+ var res = optionData[i];
+ if (
+ optionData[val.dataIndex].len == res.len &&
+ res.vals[0] == val.data
+ ) {
+ return (
+ "鏁板�硷細 " +
+ res.vals[0] +
+ " <br> 璺濈锛�" +
+ (res.len / 1000).toFixed(3) +
+ "KM<br> 缁忓害锛�" +
+ res.x.toFixed(6) +
+ "<br> 绾害锛�" +
+ res.y.toFixed(6)
+ );
+ break;
+ }
+ }
+ return "鏁板�硷細 " + val.data + " <br> 璺濈锛�" + val.dataIndex + "Km";
+ } else {
+ return "鏁板�硷細 " + val.data + " <br> 璺濈锛�" + val.dataIndex + "m";
+ }
+ },
},
+
+ grid: {
+ left: "5%", // 缁勪欢绂诲鍣ㄥ乏渚х殑璺濈,鐧惧垎姣斿瓧绗︿覆鎴栨暣鍨嬫暟瀛�
+
+ right: "23%",
+
+ containLabel: true, //grid 鍖哄煙鏄惁鍖呭惈鍧愭爣杞寸殑鍒诲害鏍囩锛�
+ },
+
yAxis: {
type: "value",
- show: false, // 涓嶆樉绀哄潗鏍囪酱绾裤�佸潗鏍囪酱鍒诲害绾垮拰鍧愭爣杞翠笂鐨勬枃瀛�
+ show: true, // 涓嶆樉绀哄潗鏍囪酱绾裤�佸潗鏍囪酱鍒诲害绾垮拰鍧愭爣杞翠笂鐨勬枃瀛�
axisTick: {
- show: false, // 涓嶆樉绀哄潗鏍囪酱鍒诲害绾�
+ show: true, // 涓嶆樉绀哄潗鏍囪酱鍒诲害绾�
},
axisLine: {
- show: false, // 涓嶆樉绀哄潗鏍囪酱绾�
+ show: true, // 涓嶆樉绀哄潗鏍囪酱绾�
},
axisLabel: {
- show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ show: true, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
},
splitLine: {
- show: false, // 涓嶆樉绀虹綉鏍肩嚎
+ show: true, // 涓嶆樉绀虹綉鏍肩嚎
},
},
series: seriesData.value,
});
window.onresize = function () {
- chart.resize();
+ myChart.resize();
};
}
</script>
--
Gitblit v1.9.3