本文介绍如何在ECharts中实现折线图各线段显示不同颜色的功能。通过配置series数组中的itemStyle对象，利用visualMap或自定义颜色数组，可为折线的每一段指定独立颜色。适用于展示数据波动特征或突出特定区间，提升图表可读性与视觉表现力。
ECharts折线图分段颜色效果展示
首先查看实现后的视觉效果，如下图所示。
具体的配置代码如下：
分段颜色配置代码示例
zqChartFour: {
title: {
text: "一天用电量分布",
subtext: "纯属虚构",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
toolbox: {
show: true,
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"00:00",
"01:15",
"02:30",
"03:45",
"05:00",
"06:15",
"07:30",
"08:45",
"10:00",
"11:15",
"12:30",
"13:45",
"15:00",
"16:15",
"17:30",
"18:45",
"20:00",
"21:15",
"22:30",
"23:45",
],
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value} W",
},
axisPointer: {
snap: true,
},
},
visualMap: [
{
show: false,
dimension: 0,
seriesIndex: 0, //第一部分数据
pieces: [
{
lte: 6,
color: "orange",
},
{
gt: 6,
lte: 8,
color: "red",
},
{
gt: 8,
lte: 14,
color: "purple",
},
{
gt: 14,
lte: 17,
color: "Chocolate",
},
{
gt: 17,
color: "pink",
},
],
},
{
show: false,
dimension: 0,
seriesIndex: 1, //第二部分数据
pieces: [
{
lte: 3,
color: "blue",
},
{
gt: 3,
lte: 8,
color: "black",
},
{
gt: 8,
lte: 14,
color: "green",
},
{
gt: 14,
lte: 17,
color: "grey",
},
{
gt: 17,
color: "DodgerBlue",
},
],
},
],
series: [
{
name: "用电量",
type: "line",
smooth: true,
data: [
300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400,
500, 600, 750, 800, 700, 600, 400,
],
},
{
name: "费用",
type: "line",
smooth: true,
data: [
200, 180, 150, 160, 170, 200, 450, 400, 300, 290, 280, 290, 300,
400, 400, 650, 700, 600, 450, 300,
],
},
],
},以上就是ECharts折线图实现分段不同颜色的完整方法。如需了解更多ECharts颜色相关技巧，可查阅本站往期文章或继续浏览后续内容，感谢支持。