You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
8.7 KiB
293 lines
8.7 KiB
<template> |
|
<div style="width: 100%; height: 100%"> |
|
<div class="right-table"> |
|
<div class="choice"> |
|
<div |
|
class="mr20" |
|
v-for="(item, index) in energyTypes" |
|
:key="index" |
|
@click="handleEnter(index, item.name)" |
|
:class="{ timeStyle: sharedIndex == index }" |
|
> |
|
{{ item.name }} |
|
</div> |
|
</div> |
|
<div class="charts" ref="chart_ref"></div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as echarts from "echarts"; |
|
import { viewYearEnergy } from "@/api/index"; |
|
export default { |
|
data() { |
|
return { |
|
energyTypes: [], |
|
sharedIndex: 0, |
|
chartInstance: null, |
|
option: {}, |
|
colorList: [ |
|
{ |
|
color: "#00CED1", |
|
offsetColor1: "rgba(0, 206, 209, 0.5)", |
|
offsetColor2: "rgba(0, 206, 209, 0)", |
|
}, |
|
{ |
|
color: "#ffe21e", |
|
offsetColor1: "rgba(255,226,30, 0.5)", |
|
offsetColor2: "rgba(255,226,30, 0)", |
|
}, |
|
{ |
|
color: "#1a69f1", |
|
offsetColor1: "rgba(26, 105, 241, 0.5)", |
|
offsetColor2: "rgba(26, 105, 241, 0)", |
|
}, |
|
{ |
|
color: "#2df499", |
|
offsetColor1: "rgba(45,244,153, 0.5)", |
|
offsetColor2: "rgba(45,244,153, 0)", |
|
}, |
|
{ |
|
color: "#e87b4b", |
|
offsetColor1: "rgba(232, 123, 75, 0.5)", |
|
offsetColor2: "rgba(232, 123, 75, 0)", |
|
}, |
|
], |
|
}; |
|
}, |
|
mounted() { |
|
this.initChart(); |
|
window.addEventListener("resize", this.screenAdapter); |
|
this.screenAdapter(); |
|
this.echartsData(); |
|
}, |
|
destroyed() { |
|
//取消监听器 |
|
window.removeEventListener("resize", this.screenAdapter); |
|
}, |
|
methods: { |
|
// 选择日月年 |
|
handleEnter(index, event) { |
|
console.log("index", index); |
|
console.log("event", event); |
|
this.chartInstance.dispose(); |
|
this.initChart(); |
|
this.sharedIndex = index; |
|
// 使用 find 方法查找符合条件的对象 |
|
const chartsObj = this.energyTypes.find((item) => item.name === event); |
|
const colorObj = this.colorList.find( |
|
(_, currentIndex) => currentIndex === index |
|
); |
|
console.log("当前要渲染的数据对象", chartsObj); |
|
console.log("当前要渲染的颜色对象", colorObj); |
|
let adapterOption = {}; |
|
// 添加折线的配置 |
|
adapterOption = { |
|
tooltip: { |
|
trigger: "axis", |
|
// 自定义 tooltip 内容 |
|
formatter: function (params) { |
|
var res = params[0].name + "<br/>"; |
|
for (var i = 0, l = params.length; i < l; i++) { |
|
var seriesName = params[i].seriesName; |
|
var value = params[i].value; |
|
var marker = |
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
|
params[i].color + |
|
'"></span>'; |
|
// 根据不同德seriesName 返回不同的单位 |
|
if (chartsObj.unit) { |
|
res += |
|
marker + |
|
seriesName + |
|
":" + |
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
value + |
|
chartsObj.unit + |
|
"</span><br>"; |
|
} else { |
|
res += |
|
marker + |
|
seriesName + |
|
":" + |
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
value + |
|
"</span><br>"; |
|
} |
|
} |
|
return res; |
|
}, |
|
}, |
|
xAxis: { |
|
data: chartsObj.timeStr, |
|
}, |
|
yAxis: { |
|
name: chartsObj.unit, |
|
}, |
|
series: [ |
|
{ |
|
data: chartsObj.data, |
|
name: event, |
|
//折线颜色 |
|
itemStyle: { |
|
color: colorObj.color, //折线的颜色 |
|
}, |
|
lineStyle: { |
|
color: colorObj.color, //折线点的颜色 |
|
}, |
|
areaStyle: { |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: colorObj.offsetColor1, // 渐变起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: colorObj.offsetColor2, // 渐变结束颜色 |
|
}, |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
}, |
|
}, |
|
], |
|
}; |
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
this.chartInstance.setOption(adapterOption); |
|
//手动的调用图标对象的resize才能产生效果 |
|
this.chartInstance.resize(); |
|
}, |
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
|
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() { |
|
this.chartInstance = echarts.init(this.$refs.chart_ref); |
|
this.option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
legend: { |
|
show: false, |
|
}, |
|
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轴分割线 |
|
}, |
|
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, |
|
}, |
|
], |
|
}; |
|
//把配置项给实例对象 |
|
this.chartInstance.setOption(this.option, true); |
|
}, |
|
echartsData() { |
|
viewYearEnergy().then((res) => { |
|
console.log("折线图返回值", res); |
|
this.energyTypes = res.rows; |
|
// 处理值 |
|
// 在组件挂载完成后调用 handleEnter 方法 |
|
if (this.energyTypes.length > 0) { |
|
this.handleEnter(0, this.energyTypes[0].name); |
|
} |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.right-table { |
|
padding: 27px 15px 35px 15px; |
|
} |
|
.mr20 { |
|
width: 92px; |
|
padding: 2px; |
|
} |
|
.charts { |
|
margin-top: 20px; |
|
width: 100%; |
|
height: 300px; |
|
} |
|
</style>
|
|
|