业务需求，要根据选中的下拉数据字段，生成对应的折线数据，取消对应的不显示对应的数据展示。
1.功能演示
<template>
<div class="DauUse">
<div class="absolute" style="left:760px;top:760px;width:190px;height:36px;border: 1px solid rgb(76, 202, 253);border-radius: 4px;">
<el-select v-model="information" multiple clearable :collapse-tags="true" @change="changewd" style="width:190px;height:36px;line-height:36px;">
<el-option
v-for="item in fangdianList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div ref="testChart" style="width: 818px;height: 245px;"></div>
</div>
</template>
<script>
export default {
data() {
return {
fangdianList:[
{
value: '盘管温度',
label: '盘管温度'
}, {
value: '冷凝温度',
label: '冷凝温度'
}, {
value: '室内温度',
label: '室内温度'
} ],
information:[],
optionsChart :'',
}
}，
methods: {
getData（）{
//初始化图表
this.listChart = echarts.init(this.$refs.testChart)；
this.optionsChart = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
lineStyle: {
color: "#999", //设置提示框线条颜色
},
crossStyle: {
color: "#999",
},
},
},
legend: {
data: ["盘管温度"],
top: 0,
textStyle: { color: "#FFF" },
},
grid: {
top: "10%",
left: "4%",
right: "2%",
bottom: "30",
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"00:00",
"02:00",
"04:00",
"06:00",
"08:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
"22:00",
"24:00",
],
splitLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#4CCAFD",
},
},
},
yAxis: {
type: "value",
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#4CCAFD",
},
},
},
dataZoom: [
{
type: "inside",
start: 0,
end: 30,
},
{
start: 0,
end: 10,
},
],
series: [
{
name: "盘管温度",
type: "line",
smooth: true,
data: [44, 46, 31, 33, 50, 49, 42, 39, 40, 38],
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(76, 202, 253, 0.5)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(76, 202, 253, 0)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
};
}
// 使用刚指定的配置项和数据显示图表。
this.listChart.setOption(this.optionsChart);
//请求到的数据，模拟拿到下拉菜单数据
this.$axios({}).then(res => {
// 下拉初始赋值第一条数据
this.zdValue = this.zhandianList[0].label
this.information = [this.fangdianList[0].value]
})
}，
// 温度触发事件
changewd(e){
// 模拟数据
const listData =[
{
name: '盘管温度',
type: 'line',
smooth: true,
data: [44, 46, 31, 33, 50, 49, 42, 39, 40, 38],
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(76, 202, 253, 0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(76, 202, 253, 0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
name: '冷凝温度',
type: 'line',
smooth: true,
data: [36, 47, 45, 31, 34, 41, 49, 30, 48, 43],
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(76, 202, 253, 0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(76, 202, 253, 0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
name: '室内温度',
type: 'line',
smooth: true,
data: [35, 46, 50, 47, 33, 40, 39, 44, 38, 42],
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(76, 202, 253, 0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(76, 202, 253, 0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
]
const data=[]; //循环的series数据
const legendList=[]; //循环的legend数据
//循环对比e选中的数据名字和模拟数据中的name相同时push到数组中
for (let i = 0; i < e.length; i++) {
for (let j = 0; j < listData.length; j++) {
// 相同条件名字的push到数组中
if (e[i] == listData[j].name) {
data.push(listData[j]);
legendList.push(listData[j].name)
}
}
}
//赋值
this.optionsChart.series = data
this.optionsChart.legend.data = legendList
//图表刷新变化
this.listChart.setOption(this.optionsChart,true);
}
}
</script>```
