echarts 折线图预警及多段线展示

杨家胡口

已于 2022-08-18 19:27:20 修改

阅读量650

点赞数

文章标签： echarts javascript junit

于 2022-08-17 16:45:34 首次发布

本文链接：https://blog.csdn.net/qq_41438838/article/details/126389355

版权

该博客介绍了如何使用Echarts库创建带有预警功能的折线图，包括多段线的展示，详细阐述了配置项和数据设定，如设置预警线、颜色、网格线等，以实现数据的可视化分析。

摘要由CSDN通过智能技术生成

//多图展示
getChartslist() {
if (this.tblist.length > 0) {
this.tblist.forEach(item => {
var myChart = this.$echarts.init(
document.getElementById("main" + item.id)
);
var sd = parseInt(item.sd);
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: "axis"
},
xAxis: {
type: "category",
data: [
"1",
"11",
"111",
"1111",
"11111",
"111111",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
// data: item.data1,
splitLine: {
//网格线
lineStyle: {
type: "dashed" //设置网格线类型 dotted：虚线 solid:实线
// width: 4,
},
show: true //隐藏或显示
}
// data: item.data1
},
yAxis: {
min: -4 * sd,
max: 4 * sd,
interval: sd, // 刻度间隔
axisLabel: {
formatter: function(value) {
var texts = [];
if (value == 0) {
texts.push("x");
} else if ((value <= sd) & (value >= 0)) {
texts.push("1ds");
} else if ((value <= 2 * sd) & (value >= sd)) {
texts.push("2ds");
} else if ((value <= 3 * sd) & (value >= 2 * sd)) {
texts.push("3ds");
} else if ((value >= -sd) & (value <= 0)) {
texts.push("-1ds");
} else if ((value >= -2 * sd) & (value <= -1 * sd)) {
texts.push("-2ds");
} else if ((value >= -3 * sd) & (value <= -2 * sd)) {
texts.push("-3ds");
} else {
texts.push("");
}
return texts;
}
}
},
visualMap: {
pieces: [
{
lte: -1 * sd,
color: "red" //最小值顔色
},
{
gt: -1 * sd,
lte: 1 * sd,
color: "#000000"
},
{
gt: 1 * sd,
color: "red" //最大值顔色
}
],
left: "center", //标签距离左边的距离，还可以用left。center等字段
top: "25", //标签距离顶部距离。还可以用top。middle等字段
orient: "horizontal", //标签排列方式，水平和垂直
show: false //标签是否显示
},
series: [
{
// name: '标题',
type: "line",
// 折线拐点样式