效果如下:
当图例大于指定条数, 即可展示切换按钮;
主要是这3个方法: this.updateChart();this.updateChart();this.updateChart();
<template>
<!-- 设备监测 -->
<div id="option_modes">
<line-chart :option="optionChart" :height="'100%'"></line-chart>
</div>
</template>
<script>
import lineChart from "@/components/Charts/LineChart";
const fn5 = function() {
var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var colorArray = colorValue.split(",");
var color = "#";
for (var i = 0; i < 6; i++) {
color += colorArray[Math.floor(Math.random() * 16)];
}
return color;
};
export default {
components: {
lineChart
},
props: {},
computed: {
echartsData() {
return this.$parent.echartsData || {};
}
},
watch: {
echartsData: {
handler(val) {
// console.log('valval',val)
if (val && JSON.stringify(val) != "{}") {
this.getDataAnalysis(val);
}
},
deep: true,
immediate: true
}
},
data() {
return {
loading: true,
optionChart: {},
currentPage: 0,
itemsPerPage: 20,
totalItems: 0,
seriesData: [],
legendData: [],
yAxisDatas: [],
xAxisDatas: [],
unitLists: [],
unitDatas: [],
chartObj: {}
};
},
created() {},
methods: {
getDataAnalysis(obj) {
this.chartObj = obj;
let seriesData = [],
yAxisDatas = [],
xAxisDatas = [],
unitLists = [],
unitDatas = [];
let subtypeLists = this.uniqueQc(obj.subType); //获取所有的不同单位名称,用于设置y轴的数量
subtypeLists.forEach((ele_two, ind_two) => {
let uIndex = obj.subType.findIndex(item => item == ele_two); //获取当前子类型在查询参数中的下标位置
let uName = obj.units[uIndex]; //获取对应下标位置的单位
let unitInd = unitLists.find(item => item.name == uName); //去重当前展示的子类型中单位,获取不重复的子类型单位(同单位的y轴设置刻度一样)
if (!unitInd) {
let obj = {
name: uName,
arrs: [] //同单位的数值集合
};
unitLists.push(obj); //获取去重后的单位列表
}
unitDatas.push(uName);
let posType = "left",
offset = 0;
offset = ind_two * 42;
yAxisDatas.push({
name: ele_two + " (" + uName + ")",
nameLocation: "center",
nameGap: 23,
type: "value",
alignTicks: true,
position: posType,
offset: offset,
axisLabel: {
textStyle: {
color: "#b2b8bf"
}
},
// 分割线
splitLine: {
lineStyle: {
color: "rgba(229,233,237,1)"
}
}
});
});
obj.dataVals.forEach((data, index) => {
// 取相同单位的子类型测点,保持同单位的y轴坐标相等(获取所有同单位的数组,取合集中最大值)
let findUnit_ind = unitLists.findIndex(
item => item.name == obj.units[index]
);
if (findUnit_ind != -1) {
unitLists[findUnit_ind].arrs = unitLists[findUnit_ind].arrs.concat(
data
);
}
// 循环查询获取值得数组,渲染页面折线图数据
let colorInd = fn5();
seriesData.push({
name: obj.names[index],
type: "line",
connectNulls: true,
showSymbol: false,
lineStyle: {
normal: {
color: colorInd
}
},
itemStyle: {
normal: {
color: colorInd
}
},
data: data
});
let yName = obj.subType[index] + " (" + obj.units[index] + ")";
let yIndex = yAxisDatas.findIndex(item => item.name == yName);
if (yIndex != -1) {
this.$set(seriesData[index], "yAxisIndex", yIndex);
} else {
this.$set(seriesData[index], "yAxisIndex", 0);
}
if (obj.earlywarningvalues[index]) {
seriesData[index].markLine = {
data: [
{
yAxis: obj[index].earlywarningvalues,
label: {
position: "end",
formatter: function(para) {
return para.value;
},
overflow: "break"
}
}
]
};
}
});
unitLists.forEach((ele_one, ele_ind) => {
let arr = ele_one.arrs || [];
let maxV = Number(arr[0]);
for (let i = 0; i < arr.length - 1; i++) {
maxV = maxV < Number(arr[i + 1]) ? Number(arr[i + 1]) : maxV;
}
yAxisDatas.forEach((ele_two, ind_two) => {
if (ele_one.name == unitDatas[ind_two]) {
ele_two.max = maxV;
}
});
});
obj.times.forEach(ele_three => {
xAxisDatas.push(this.$dayjs(ele_three).format("YYYY-MM-DD HH:mm:ss"));
});
this.seriesData = seriesData;
this.legendData = seriesData.map(item => item.name);
this.totalItems = seriesData.length;
this.yAxisDatas = yAxisDatas;
this.xAxisDatas = xAxisDatas;
this.unitLists = unitLists;
this.unitDatas = unitDatas;
this.updateChart();
},
updateChart() {
const { currentPage, itemsPerPage, legendData } = this;
const displayedItems = legendData.slice(
currentPage * itemsPerPage,
(currentPage + 1) * itemsPerPage
);
var option = {
legend: {
top: 0,
padding: [10, 60, 10, 0],
height: 100,
itemGap: 10, //图例之间的间距
data: displayedItems
},
toolbox: {
// show: true,
show: this.totalItems > this.itemsPerPage ? true : false,
color: "#b2b8bf",
right: "0", // 工具箱距离容器左侧的距离,也可以使用像素值,例如 '50px'
top: "20",
feature: {
myprev: {
show: true,
title: "Previous Page",
icon:
"M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z",
onclick: this.prevPage
},
mynext: {
show: true,
title: "Next Page",
icon:
"M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z",
onclick: this.nextPage
}
}
},
// 其他配置项
tooltip: {
trigger: "axis",
formatter: function(params) {
let html = "";
html += `<div><span>${params[0].axisValue}</span></div>`;
params.forEach(v => {
html += `<div style="color: #666;font-size: 14px;">
<span style="display:inline-block;margin-right:5px;color:${
v.color
}">${v.seriesName}</span>
<span style="display:inline-block;text-align:right;font-weight:700;font-size: 18px;color:${
v.color
}">${Number(v.value).toFixed(2)} ${
this.chartObj.units[v.seriesIndex]
}</span></div>`;
});
return html;
},
extraCssText:
"background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;"
},
grid: {
top:
Math.ceil(this.chartObj.dataVals.length / 6) * 50 > 150
? 150
: Math.ceil(this.chartObj.dataVals.length / 6) * 50,
left: 25 * this.yAxisDatas.length,
right: "2%",
bottom: "5%",
containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLabel: {
textStyle: {
fontSize: "14px",
color: "#b2b8bf"
}
},
axisLine: {
lineStyle: {
color: "#D9D9D9"
}
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(229,233,237,1)"
}
},
data: this.xAxisDatas
}
],
yAxis: this.yAxisDatas,
dataZoom: [
{
type: "inside",
start: 0,
end: 100
},
{
start: 0,
end: 100,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "80%",
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
],
series: this.seriesData
};
this.optionChart = option;
},
prevPage() {
console.log(this.currentPage);
if (this.currentPage > 0) {
this.currentPage--;
this.updateChart();
}
},
nextPage() {
if ((this.currentPage + 1) * this.itemsPerPage < this.totalItems) {
this.currentPage++;
this.updateChart();
}
},
// 利用ES6 Set去重
uniqueQc(arr) {
return Array.from(new Set(arr));
}
}
};
</script>
<style lang="scss" scoped>
@import "~@/styles/index.scss";
#option_modes {
width: 100%;
height: calc(100% - 16px);
margin-top: 16px;
padding: 15px;
display: flex;
flex-direction: column;
background: #fff;
min-height: 400px;
.content_sel {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 16px;
.sel_name {
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
color: #666666;
}
::v-deep .el-checkbox {
margin-right: 20px;
}
::v-deep .el-checkbox__label {
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
color: #999999;
}
}
.content_echart {
width: 100%;
height: 95%;
overflow: auto;
}
}
</style>