From 9f9ae3e0253f2d657b6b337d62d269394d04ee09 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 17 十一月 2023 14:29:08 +0800
Subject: [PATCH] 版本更新
---
src/components/BarGraphAxisLine.vue | 130 +++++++++++++++++++++++++++++++-----------
1 files changed, 95 insertions(+), 35 deletions(-)
diff --git a/src/components/BarGraphAxisLine.vue b/src/components/BarGraphAxisLine.vue
index f980895..669447e 100644
--- a/src/components/BarGraphAxisLine.vue
+++ b/src/components/BarGraphAxisLine.vue
@@ -1,6 +1,6 @@
<template>
<div class="Echarts_box" :style="{ width: width, height: height }">
- <div id="myEcharts1" style="width: 100%; height: 100%"></div>
+ <div id="myEchartsBIG" style="width: 100%; height: 100%"></div>
</div>
</template>
<script lang="ts" setup>
@@ -13,6 +13,7 @@
defineEmits,
watch,
onUnmounted,
+ nextTick,
} from "vue";
import * as echarts from "echarts";
@@ -20,21 +21,75 @@
const props = defineProps({
width: String,
height: String,
+ layerData: Object,
});
let myEcharts = echarts;
+let seriesData = ref([]);
+let xAxisData = ref([]);
+let dataLength;
+let data = [];
onMounted(() => {
- initChart();
+ props.layerData.points.forEach((e, i) => {
+ xAxisData.value.push(returnFloat1(e.len));
+ });
+ data = trans(props.layerData.points);
+ seriesData.value = [];
+ data.forEach((e) => {
+ seriesData.value.push({
+ data: e,
+ type: "line",
+ smooth: true,
+ symbol: "none", //鍙栨秷鎶樼偣鍦嗗湀
+ label: {
+ label: {
+ show: false,
+ position: "top",
+ formatter: "{c}",
+ },
+ },
+ });
+ });
+ nextTick(() => {
+ initChart();
+ });
});
onUnmounted(() => {
myEcharts.dispose;
});
+function returnFloat1(value) {
+ if (value == 0) {
+ return value;
+ }
+ value = Math.round(parseFloat(value) * 10) / 10;
+ if (value.toString().indexOf(".") < 0) {
+ value = value.toString() + ".0";
+ }
+ return value;
+}
+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("myEcharts1"),
+ document.getElementById("myEchartsBIG"),
"purple-passion"
);
+ var val = [];
+ xAxisData.value.filter(res => {
+ val.push((res / 1000).toFixed(3));
+ })
+
chart.setOption({
title: {
text: "",
@@ -99,48 +154,53 @@
},
legend: {
- data: [],
+ // data: xAxisData.value,
},
xAxis: {
type: "category",
- data: [
- "涓�鏈�",
- "浜屾湀",
- "涓夋湀",
- "鍥涙湀",
- "浜旀湀",
- "鍏湀",
- "涓冩湀",
- "鍏湀",
- "涔濇湀",
- "鍗佹湀",
- "鍗佷竴鏈�",
- "鍗佷簩鏈�",
- ],
+ data: val,
+ name: "鍗冪背",
+ axisLabel: {
+ //x杞存枃瀛楃殑閰嶇疆
+ showMinLabel: true, // 寮哄埗鏄剧ず鏈�灏忓�兼爣绛�
+ showMaxLabel: true, // 寮哄埗鏄剧ず鏈�澶у�兼爣绛�
+ //interval: 0, //浣縳杞存枃瀛楁樉绀哄叏
+ // textStyle: {
+ // color: "rgba(219, 225, 255, 1)",
+ // },
+ // formatter: function (params) {
+ // var newParamsName = "";
+ // var paramsNameNumber = params.length;
+ // var provideNumber = 3; //涓�琛屾樉绀哄嚑涓瓧
+ // var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+ // if (paramsNameNumber > provideNumber) {
+ // for (var p = 0; p < rowNumber; p++) {
+ // var tempStr = "";
+ // var start = p * provideNumber;
+ // var end = start + provideNumber;
+ // if (p == rowNumber - 1) {
+ // tempStr = params.substring(start, paramsNameNumber);
+ // } else {
+ // tempStr = params.substring(start, end) + "\n";
+ // }
+ // newParamsName += tempStr;
+ // }
+ // } else {
+ // newParamsName = params;
+ // }
+ // return newParamsName;
+ // },
+ },
},
tooltip: {
trigger: "axis",
},
+
yAxis: {
type: "value",
+
},
- 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