From d91053e5cbe7fac6deee994c22c0529fd1b08755 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 15 九月 2023 15:47:08 +0800
Subject: [PATCH] 标绘查询
---
src/components/BarGraph.vue | 150 ++++++++++++++++++++++++++++++++++++++------------
1 files changed, 114 insertions(+), 36 deletions(-)
diff --git a/src/components/BarGraph.vue b/src/components/BarGraph.vue
index 65fb06a..10dfe43 100644
--- a/src/components/BarGraph.vue
+++ b/src/components/BarGraph.vue
@@ -1,5 +1,8 @@
<template>
- <div id="myEcharts" :style="{ width: width, height: height }"></div>
+ <div
+ :id="`myEcharts${chartsId}`"
+ :style="{ width: width, height: height }"
+ ></div>
</template>
<script lang="ts" setup>
import {
@@ -11,52 +14,134 @@
defineEmits,
watch,
onUnmounted,
+ nextTick,
} from "vue";
import * as echarts from "echarts";
+import { fa } from "element-plus/es/locale";
//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
const props = defineProps({
width: String,
height: String,
+ layerData: Object,
+ chartsId: String,
});
let myEcharts = echarts;
+let seriesData = ref([]);
+let xAxisData = ref([]);
+let dataLength;
+let data = [];
+let isshow = ref(true);
+watch(
+ () => props.layerData,
+ (nVal, oVal) => {
+ xAxisData.value = [];
+ props.layerData.points.forEach((e, i) => {
+ xAxisData.value.push(e.len);
+ });
+ data = trans(props.layerData.points);
+ console.log(data);
+ 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}",
+ },
+ },
+ },
+ });
+ });
+ console.log(seriesData.value);
+
+ nextTick(() => {
+ initChart();
+ });
+ },
+ { deep: true }
+);
onMounted(() => {
- initChart();
+ // 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: {
+ label: {
+ show: false,
+ position: "top",
+ formatter: "{c}",
+ },
+ },
+ },
+ });
+ });
+ nextTick(() => {
+ initChart();
+ });
});
onUnmounted(() => {
myEcharts.dispose;
});
+function trans(arr) {
+ let result = [];
+ arr.forEach((item) => {
+ item.vals.forEach((d, i) => {
+ let a = (result[i] = result[i] || []);
+
+ a.push(d);
+ });
+ });
+
+ return result;
+}
function initChart() {
let chart = myEcharts.init(
- document.getElementById("myEcharts"),
+ document.getElementById(`myEcharts${props.chartsId}`),
"purple-passion"
);
chart.setOption({
title: {
- text: "",
+ text: props.layerData.layerName,
left: "center",
+ textStyle: {
+ //鏂囧瓧棰滆壊
+ color: "#fff",
+ // //瀛椾綋椋庢牸,'normal','italic','oblique'
+ // fontStyle: "normal",
+ // //瀛椾綋绮楃粏 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
+ // fontWeight: "bold",
+ // //瀛椾綋绯诲垪
+ // fontFamily: "sans-serif",
+ // //瀛椾綋澶у皬
+ // fontSize: 18,
+ },
},
legend: {
- data: [],
+ // data: xAxisData.value,
},
xAxis: {
+ name: "绫筹紙m锛�",
type: "category",
- data: [
- "涓�鏈�",
- "浜屾湀",
- "涓夋湀",
- "鍥涙湀",
- "浜旀湀",
- "鍏湀",
- "涓冩湀",
- "鍏湀",
- "涔濇湀",
- "鍗佹湀",
- "鍗佷竴鏈�",
- "鍗佷簩鏈�",
- ],
+ data: xAxisData.value,
show: false, // 涓嶆樉绀哄潗鏍囪酱绾裤�佸潗鏍囪酱鍒诲害绾垮拰鍧愭爣杞翠笂鐨勬枃瀛�
axisTick: {
show: false, // 涓嶆樉绀哄潗鏍囪酱鍒诲害绾�
@@ -66,6 +151,8 @@
},
axisLabel: {
show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ showMinLabel: true, // 寮哄埗鏄剧ず鏈�灏忓�兼爣绛�
+ showMaxLabel: true, // 寮哄埗鏄剧ず鏈�澶у�兼爣绛�
},
splitLine: {
show: false, // 涓嶆樉绀虹綉鏍肩嚎
@@ -73,6 +160,13 @@
},
tooltip: {
trigger: "axis",
+ axisPointer: {
+ type: "cross",
+ label: {
+ backgroundColor: "#6a7985",
+ },
+ },
+ formatter: "璺濈锛歿b}m <br> 鏁板�硷細{c}", //{a}锛堢郴鍒楀悕绉帮級锛寋b}锛堟暟鎹」鍚嶇О锛夛紝{c}锛堟暟鍊硷級, {d}锛堢櫨鍒嗘瘮锛�
},
yAxis: {
type: "value",
@@ -90,23 +184,7 @@
show: false, // 涓嶆樉绀虹綉鏍肩嚎
},
},
- series: [
- {
- data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
- type: "line",
- smooth: true,
- symbol: "none", //鍙栨秷鎶樼偣鍦嗗湀
- itemStyle: {
- normal: {
- label: {
- show: false,
- position: "top",
- formatter: "{c}",
- },
- },
- },
- },
- ],
+ series: seriesData.value,
});
window.onresize = function () {
chart.resize();
--
Gitblit v1.9.3