<template>
|
<div class="Echarts_box" :style="{ width: width, height: height }">
|
<div id="myEchartsBIG" style="width: 100%; height: 100%"></div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
watch,
|
onUnmounted,
|
nextTick,
|
} from "vue";
|
import * as echarts from "echarts";
|
|
//defineProps 来接收组件的传值
|
const props = defineProps({
|
width: String,
|
height: String,
|
layerData: Object,
|
});
|
let myEcharts = echarts;
|
let seriesData = ref([]);
|
let xAxisData = ref([]);
|
let dataLength;
|
let data = [];
|
onMounted(() => {
|
console.log(props.layerData);
|
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("myEchartsBIG"),
|
"purple-passion"
|
);
|
chart.setOption({
|
title: {
|
text: "",
|
left: "center",
|
},
|
toolbox: {
|
show: true, //是否显示工具栏组件
|
orient: "horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical'
|
itemSize: 15, //工具栏 icon 的大小
|
itemGap: 10, //工具栏 icon 每项之间的间隔
|
showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
|
feature: {
|
mark: {
|
// '辅助线开关'
|
show: true,
|
},
|
// dataView : { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
|
// show: true, //是否显示该工具。
|
// title:"数据视图",
|
// readOnly: false, //是否不可编辑（只读）
|
// lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
|
// backgroundColor:"#fff", //数据视图浮层背景色。
|
// textareaColor:"#fff", //数据视图浮层文本输入区背景色
|
// textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色
|
// textColor:"#000", //文本颜色。
|
// buttonColor:"#c23531", //按钮颜色。
|
// buttonTextColor:"#fff", //按钮文本颜色。
|
// },
|
// magicType: { //动态类型切换
|
// show: true,
|
// title:"切换", //各个类型的标题文本，可以分别配置。
|
// type: ['line', 'bar'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
|
// },
|
// restore : { //配置项还原。
|
// show: true, //是否显示该工具。
|
// title:"还原",
|
// },
|
saveAsImage: {
|
//保存为图片。
|
show: true, //是否显示该工具。
|
type: "png", //保存的图片格式。支持 'png' 和 'jpeg'。
|
name: "pic1", //保存的文件名称，默认使用 title.text 作为名称
|
backgroundColor: "#ffffff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
|
title: "保存为图片",
|
pixelRatio: 1, //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
|
},
|
// dataZoom :{ //数据区域缩放。目前只支持直角坐标系的缩放
|
// show: true, //是否显示该工具。
|
// title:"缩放", //缩放和还原的标题文本
|
// xAxisIndex:0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
|
// yAxisIndex:false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
|
// },
|
},
|
zlevel: 0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
|
z: 2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
|
left: "right", //组件离容器左侧的距离,'left', 'center', 'right','20%'
|
top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
|
right: "auto", //组件离容器右侧的距离,'20%'
|
bottom: "auto", //组件离容器下侧的距离,'20%'
|
width: "auto", //图例宽度
|
height: "auto", //图例高度
|
},
|
|
legend: {
|
// data: xAxisData.value,
|
},
|
xAxis: {
|
type: "category",
|
data: xAxisData.value,
|
name: "米（m）",
|
axisLabel: {
|
//x轴文字的配置
|
showMinLabel: true, // 强制显示最小值标签
|
showMaxLabel: true, // 强制显示最大值标签
|
//interval: 0, //使x轴文字显示全
|
// 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: seriesData.value,
|
});
|
window.onresize = function () {
|
chart.resize();
|
};
|
}
|
</script>
|
<style lang="less" scoped>
|
.Echarts_box {
|
background: #fff;
|
}
|
</style>
|
