5 changed files with 980 additions and 25 deletions
@ -0,0 +1,416 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="historyCharts" ref="chart_ref"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
temArray: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chartInstance: null, |
||||||
|
option: {}, |
||||||
|
chartData1: [], |
||||||
|
chartData2: [], |
||||||
|
chartData3: [], |
||||||
|
chartData4: [], |
||||||
|
bottomData: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
temArray: { |
||||||
|
immediate: true, // 页面加载时立即触发一次监听 |
||||||
|
handler(newVal, oldVal) { |
||||||
|
if (newVal) { |
||||||
|
this.chartData1 = []; // 清空 chartData1 |
||||||
|
this.chartData2 = []; // 清空 chartData2 |
||||||
|
this.bottomData = []; // 清空 bottomData |
||||||
|
console.log("charts传值", newVal); |
||||||
|
let data = newVal; |
||||||
|
if (data.length > 0) { |
||||||
|
// 获取 title 和 titleStr 数组 |
||||||
|
const title = data.data[0].title; |
||||||
|
const titleStr = data.data[1].titleStr; |
||||||
|
// 获取 dataList 数组 |
||||||
|
const dataList = data.data[3].dataList; |
||||||
|
|
||||||
|
// 遍历 dataList 数组 |
||||||
|
dataList.forEach((item) => { |
||||||
|
// 查找 name 在 title 数组中的索引 |
||||||
|
const index = title.indexOf(item.name); |
||||||
|
if (index !== -1) { |
||||||
|
// 若找到匹配项，则将 name 替换为 titleStr 中对应位置的值 |
||||||
|
item.name = titleStr[index]; |
||||||
|
} |
||||||
|
}); |
||||||
|
console.log("处理后的data", data); |
||||||
|
data.forEach((item) => { |
||||||
|
if (item.timeStr) { |
||||||
|
this.bottomData = item.timeStr; |
||||||
|
} |
||||||
|
if (item.dataList) { |
||||||
|
let name1 = ""; |
||||||
|
let name2 = ""; |
||||||
|
let name3 = ""; |
||||||
|
let name4 = ""; |
||||||
|
item.dataList.forEach((val, index) => { |
||||||
|
if (val.name) { |
||||||
|
switch (index) { |
||||||
|
case 0: |
||||||
|
this.chartData1 = val.value; |
||||||
|
name1 = val.name; |
||||||
|
break; |
||||||
|
case 1: |
||||||
|
this.chartData2 = val.value; |
||||||
|
name2 = val.name; |
||||||
|
break; |
||||||
|
case 2: |
||||||
|
this.chartData3 = val.value; |
||||||
|
name3 = val.name; |
||||||
|
break; |
||||||
|
case 3: |
||||||
|
this.chartData4 = val.value; |
||||||
|
name4 = val.name; |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.$nextTick(() => { |
||||||
|
const adapterOption = { |
||||||
|
xAxis: { |
||||||
|
data: this.bottomData, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
yAxisIndex: 0, |
||||||
|
name:name1, |
||||||
|
data: this.chartData1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
yAxisIndex: 0, |
||||||
|
name:name2, |
||||||
|
data: this.chartData2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
yAxisIndex: 0, |
||||||
|
name:name3, |
||||||
|
data: this.chartData3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
yAxisIndex: 0, |
||||||
|
name:name4, |
||||||
|
data: this.chartData4, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance.resize(); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$nextTick(() => { |
||||||
|
const adapterOption = { |
||||||
|
xAxis: { |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
yAxisIndex: 0, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
yAxisIndex: 0, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
yAxisIndex: 0, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
yAxisIndex: 0, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance.resize(); |
||||||
|
this.screenAdapter(); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initChart(); |
||||||
|
this.screenAdapter(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//取消监听器 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = {}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance.resize(); |
||||||
|
}, |
||||||
|
//初始化chartInstance对象 |
||||||
|
initChart() { |
||||||
|
const chartRef = this.$refs.chart_ref; |
||||||
|
if (chartRef) { |
||||||
|
// 初始化图表的代码 |
||||||
|
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||||
|
this.option = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: true, |
||||||
|
top: 0, |
||||||
|
textStyle: { |
||||||
|
color: "white", |
||||||
|
}, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: "10%", |
||||||
|
left: "4%", |
||||||
|
right: "6%", |
||||||
|
bottom: "3%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, //x轴分割线 |
||||||
|
data: this.bottomData, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
// max:20, |
||||||
|
// // // min:'dataMin', |
||||||
|
// // // max:'dataMax', |
||||||
|
// name: "kwh", // 第一个 y 轴的单位描述 |
||||||
|
// 设置 name 的样式 |
||||||
|
nameTextStyle: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 12, |
||||||
|
}, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
data: this.chartData1, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#1a69f1", //折线点的颜色 |
||||||
|
}, |
||||||
|
lineStyle: { |
||||||
|
color: "#1a69f1", //折线点的颜色 |
||||||
|
}, |
||||||
|
smooth: false, |
||||||
|
// 不显示折线点 |
||||||
|
showSymbol: false, |
||||||
|
// 区域填充样式，添加渐变背景 |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(26, 105, 241, 0)", // 渐变结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
data: this.chartData2, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#00CED1", //折线的颜色 |
||||||
|
}, |
||||||
|
smooth: false, |
||||||
|
// 不显示折线点 |
||||||
|
showSymbol: false, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
data: this.chartData3, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#00CED1", //折线的颜色 |
||||||
|
}, |
||||||
|
smooth: false, |
||||||
|
// 不显示折线点 |
||||||
|
showSymbol: false, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
data: this.chartData4, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#00CED1", //折线的颜色 |
||||||
|
}, |
||||||
|
smooth: false, |
||||||
|
// 不显示折线点 |
||||||
|
showSymbol: false, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance.setOption(this.option, true); |
||||||
|
} else { |
||||||
|
console.error("未找到有效的 DOM 元素"); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.historyCharts { |
||||||
|
width: 100%; |
||||||
|
height:3rem; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
Loading…
Reference in new issue