You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.9 KiB
Vue
120 lines
2.9 KiB
Vue
<template>
|
|
<div class="lineChart" ref="lineChart"></div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ["chartdata"],
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {
|
|
chartdata: function (newValue, oldValue) {
|
|
this.$nextTick(() => {
|
|
// 通过 DOM API 更新文本
|
|
if (this.chartdata.length !== 0) {
|
|
this.drawLine();
|
|
}
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
// 通过 DOM API 更新文本
|
|
console.log(this.chartdata);
|
|
if (this.chartdata.length !== 0) {
|
|
this.drawLine();
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
drawLine() {
|
|
console.log("我是曲线图");
|
|
console.log(this.chartdata.points);
|
|
var pointsData = this.chartdata.points;
|
|
var legendData = [];
|
|
var xData = this.chartdata.content.map((item) => item.acquisitionTime);
|
|
var seriseData = [];
|
|
var yAxisData = [];
|
|
|
|
for (var i = 0; i < pointsData.length; i++) {
|
|
console.log(pointsData[i]);
|
|
console.log(pointsData[i].fieldDesc);
|
|
seriseData.push({
|
|
name: pointsData[i].fieldDesc,
|
|
type: "line",
|
|
yAxisIndex: i,
|
|
data: pointsData[i].data,
|
|
smooth: true,
|
|
});
|
|
legendData.push(pointsData[i].fieldDesc);
|
|
console.log(legendData);
|
|
yAxisData.push({
|
|
name: pointsData[i].fieldDesc,
|
|
type: "value",
|
|
position: i % 2 == 0 ? "left" : "right",
|
|
offset: i + 1 <= 2 ? 0 : (Math.ceil((i + 1) / 2) - 1) * 40,
|
|
// 整条y轴
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
// y轴上的小横线
|
|
axisTick: {
|
|
show: true,
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
},
|
|
});
|
|
}
|
|
let myChart = this.$echarts.init(this.$refs.lineChart);
|
|
//myChart.removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance
|
|
if (this.$refs.lineChart.hasAttribute("_echarts_instance_")) {
|
|
console.log(this.$refs.lineChart);
|
|
this.$refs.lineChart.removeAttribute("_echarts_instance_");
|
|
}
|
|
// 绘制图表
|
|
myChart.setOption({
|
|
//animation: false,
|
|
legend: {
|
|
data: legendData,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
start: 80,
|
|
end: 100,
|
|
},
|
|
{
|
|
start: 80,
|
|
end: 100,
|
|
},
|
|
],
|
|
grid: {
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
name: "时间",
|
|
boundaryGap: false,
|
|
data: xData,
|
|
},
|
|
yAxis: yAxisData,
|
|
series: seriseData,
|
|
});
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.lineChart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|