echarts修改
This commit is contained in:
978184212@qq.com
parent
171d257b5b
commit
fdda6f0f6d
|
|
@ -150,7 +150,7 @@
|
|||
resolt: [],
|
||||
chartData: {},
|
||||
opts: {
|
||||
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
color: ["#c3c3c3","#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
"#FC8452", "#9A60B4", "#ea7ccc"
|
||||
],
|
||||
padding: [0, 15, 10, 15],
|
||||
|
|
@ -479,164 +479,173 @@
|
|||
maskClick(e) {
|
||||
this.rangetime = e;
|
||||
},
|
||||
// 处理图表数据
|
||||
// 处理图表数据 - 修改getServerData方法
|
||||
getServerData(val) {
|
||||
const chartDataList = val.map(item => {
|
||||
const series = [];
|
||||
const chartDataList = val.map(item => {
|
||||
const series = [];
|
||||
|
||||
// 处理主要数据
|
||||
const mainData = (item.data.slice(0, 50) || Array(this.timeList?.length || 0).fill(0))
|
||||
.map(value => Number(value) || 0);
|
||||
// 处理主要数据
|
||||
const mainData = (item.data.slice(0, 50) || Array(this.timeList?.length || 0).fill(0))
|
||||
.map(value => Number(value) || 0);
|
||||
|
||||
const highValNum = item.highVal ? Number(item.highVal) || 0 : null;
|
||||
const lowValNum = item.lowVal ? Number(item.lowVal) || 0 : null;
|
||||
const highValNum = item.highVal ? Number(item.highVal) || 0 : null;
|
||||
const lowValNum = item.lowVal ? Number(item.lowVal) || 0 : null;
|
||||
|
||||
// 正常数据线 - 实线
|
||||
series.push({
|
||||
name: item.itemName,
|
||||
data: mainData,
|
||||
color: "#1890FF",
|
||||
lineType: "solid",
|
||||
pointShape: "circle",
|
||||
show: true
|
||||
});
|
||||
// 正常数据线 - 实线
|
||||
series.push({
|
||||
name: item.itemName,
|
||||
data: mainData,
|
||||
color: "#c3c3c3",
|
||||
lineType: "solid",
|
||||
pointShape: "circle",
|
||||
show: true
|
||||
});
|
||||
|
||||
// 最高阈值线 - 虚线
|
||||
if (highValNum !== null) {
|
||||
series.push({
|
||||
name: `最高阈值: ${highValNum}`,
|
||||
data: Array(this.timeList?.length || 0).fill(highValNum),
|
||||
color: "#FF4242",
|
||||
lineType: "dashed", // 虚线
|
||||
pointShape: "none", // 不显示点
|
||||
show: true,
|
||||
});
|
||||
}
|
||||
// 最高阈值线 - 尝试不同方式设置虚线
|
||||
if (highValNum !== null) {
|
||||
series.push({
|
||||
name: `最高阈值: ${highValNum}`,
|
||||
data: Array(this.timeList?.length || 0).fill(highValNum),
|
||||
color: "#FF4242",
|
||||
// 尝试不同的虚线设置方式
|
||||
lineType: "dash", // 或者尝试 "dashed", "dot", "dashdot"
|
||||
dashLength: 10, // 设置虚线段的长度
|
||||
gapLength: 5, // 设置间隔的长度
|
||||
pointShape: "none",
|
||||
show: true,
|
||||
// 使用自定义样式
|
||||
custom: {
|
||||
lineDash: [10, 5] // 数组格式：[线段长度, 间隔长度]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 最低阈值线 - 虚线
|
||||
if (lowValNum !== null) {
|
||||
series.push({
|
||||
name: `最低阈值: ${lowValNum}`,
|
||||
data: Array(this.timeList?.length || 0).fill(lowValNum),
|
||||
color: "#19D58A",
|
||||
lineType: "dashed", // 虚线
|
||||
pointShape: "none", // 不显示点
|
||||
show: true,
|
||||
});
|
||||
}
|
||||
// 最低阈值线
|
||||
if (lowValNum !== null) {
|
||||
series.push({
|
||||
name: `最低阈值: ${lowValNum}`,
|
||||
data: Array(this.timeList?.length || 0).fill(lowValNum),
|
||||
color: "#19D58A",
|
||||
lineType: "dash",
|
||||
dashLength: 10,
|
||||
gapLength: 5,
|
||||
pointShape: "none",
|
||||
show: true,
|
||||
custom: {
|
||||
lineDash: [10, 5]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
categories: this.timeList.slice(0, 50) || [],
|
||||
series: series,
|
||||
chartOpts: this.getChartOpts(item.itemName, item.unit)
|
||||
};
|
||||
});
|
||||
return {
|
||||
categories: this.timeList.slice(0, 50) || [],
|
||||
series: series,
|
||||
chartOpts: this.getChartOpts(item.itemName, item.unit)
|
||||
};
|
||||
});
|
||||
|
||||
// 更新resolt数据
|
||||
this.resolt = this.resolt.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
chartData: chartDataList[index] ? chartDataList[index].series : [],
|
||||
categories: chartDataList[index] ? chartDataList[index].categories : [],
|
||||
chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this.getChartOpts(item.itemName, item.unit)
|
||||
};
|
||||
});
|
||||
console.log("处理后的趋势图数据", this.resolt);
|
||||
this.resolt = this.resolt.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
chartData: chartDataList[index] ? chartDataList[index].series : [],
|
||||
categories: chartDataList[index] ? chartDataList[index].categories : [],
|
||||
chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this.getChartOpts(item.itemName, item.unit)
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 获取图表配置
|
||||
// 修改getChartOpts方法，添加对虚线的支持
|
||||
getChartOpts(itemName, unit) {
|
||||
return {
|
||||
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
"#FC8452", "#9A60B4", "#ea7ccc"
|
||||
],
|
||||
padding: [0, 15, 10, 5],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
float: "right",
|
||||
itemGap: 10,
|
||||
margin: 10,
|
||||
},
|
||||
enableScroll: false, // 禁用滚动，显示所有数据
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
scrollShow: false, // 不显示滚动条
|
||||
labelCount: 3, // 设置显示3个标签（对应我们要显示的3个点）
|
||||
boundaryGap: 'justify',
|
||||
// 自定义标签显示：显示第一个、中间和倒数第三个数据
|
||||
labelFormatter: (val, i, allLabels) => {
|
||||
if (!allLabels || allLabels.length === 0) {
|
||||
return val;
|
||||
}
|
||||
return {
|
||||
color: ["#c3c3c3", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
"#FC8452", "#9A60B4", "#ea7ccc"
|
||||
],
|
||||
padding: [0, 15, 10, 5],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
float: "right",
|
||||
itemGap: 10,
|
||||
margin: 10,
|
||||
},
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
scrollShow: false,
|
||||
labelCount: 3,
|
||||
boundaryGap: 'justify',
|
||||
labelFormatter: (val, i, allLabels) => {
|
||||
if (!allLabels || allLabels.length === 0) return val;
|
||||
|
||||
const total = allLabels.length;
|
||||
const total = allLabels.length;
|
||||
if (i === 0 || i === Math.floor(total / 2) || i === total - 3) {
|
||||
return val;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
showTitle: true,
|
||||
data: [{
|
||||
title: unit || '单位',
|
||||
}],
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
format: (item, category, index, opts) => {
|
||||
return `${category}\n${item.seriesName}: ${item.data}`
|
||||
}
|
||||
},
|
||||
line: {
|
||||
width: 2,
|
||||
smooth: true,
|
||||
// 为所有线条添加虚线配置
|
||||
style: "dash", // 默认样式
|
||||
dashLength: 8, // 虚线长度
|
||||
gapLength: 4, // 间隔长度
|
||||
lineCap: "round" // 线帽样式
|
||||
},
|
||||
// 添加自定义渲染回调
|
||||
render: {
|
||||
series: {
|
||||
line: (canvas, config, series, index) => {
|
||||
// 自定义线条渲染函数
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.save();
|
||||
|
||||
// 1. 第一个标签
|
||||
if (i === 0) {
|
||||
return val;
|
||||
}
|
||||
// 根据系列索引判断是否为阈值线（索引1和2）
|
||||
if (index === 1 || index === 2) {
|
||||
// 设置虚线
|
||||
ctx.setLineDash([10, 5]); // 10px线段，5px间隔
|
||||
ctx.lineDashOffset = 0;
|
||||
} else {
|
||||
// 实线
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
// 2. 中间标签
|
||||
const middleIndex = Math.floor(total / 2);
|
||||
if (total % 2 === 0 && i === middleIndex - 1) {
|
||||
// 如果是偶数个，显示中间两个中的前一个
|
||||
return val;
|
||||
} else if (i === middleIndex) {
|
||||
// 如果是奇数个，显示正中间
|
||||
return val;
|
||||
}
|
||||
// 调用原始绘制逻辑
|
||||
config.chart.option.extra.render.series.line.call(this, canvas, config, series, index);
|
||||
|
||||
// 3. 倒数第三个标签
|
||||
// 确保有足够的数据点
|
||||
if (total >= 3) {
|
||||
const thirdLastIndex = total - 3;
|
||||
if (i === thirdLastIndex) {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
// 如果数据少于3个，显示最后一个
|
||||
else if (i === total - 1) {
|
||||
return val;
|
||||
}
|
||||
|
||||
return ''; // 其他标签返回空字符串
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
showTitle: true,
|
||||
data: [{
|
||||
title: unit || '单位',
|
||||
}],
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
format: (item, category, index, opts) => {
|
||||
return `${category}\n${item.seriesName}: ${item.data}`
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
},
|
||||
line: {
|
||||
width: 2,
|
||||
smooth: true
|
||||
}
|
||||
}
|
||||
};
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 自定义图例渲染（如果需要）
|
||||
|
|
|
|||
Loading…
Reference in New Issue