需求就是在增长率是负数的时候节点呈现红色,反之则为绿色。
其实也很简单,就是在设置线条颜色的时候,根据你自己的需要通过方法来配置你自己的颜色,而这个回调里面会有当前echart对象对应的相关内容。
所以我们判断值的大小就可以通过params.value来确定
color: function (params) {
if (params.value * 1 >= 0) {
return "#00E785";
}
return "red";
},
配置项示例
const options = {
grid: {
left: "0%",
right: "4%",
bottom: "3%",
containLabel: true,
},
color: "#384757",
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.8)", //设置背景图片 rgba格式
axisPointer: {
type: "cross",
crossStyle: {
color: "#384757",
},
},
},
xAxis: [
{
type: "category",
data: map(data, (obj) => {
return obj.year;
}),
axisPointer: {
type: "shadow",
},
axisLabel: {
show: true,
textStyle: {
color: "#7d838b",
},
},
},
],
yAxis: [
{
type: "value",
name: "就业增长率(%)",
nameTextStyle: {
color: "#fff",
},
show: true,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#00E785",
},
},
},
],
grid: {
top: "20%",
},
series: [
{
name: "就业增长率",
type: "line",
yAxisIndex: 1,
label: seriesLabel,
lineStyle: {
// 设置线条的style等
normal: {
color: "#00E785", // 折线线条颜色:红色
},
},
itemStyle: {
textStyle: {
fontWeight: 700,
},
color: function (params) {
if (params.value * 1 >= 0) {
return "#00E785";
}
return "red";
},
},
data: map(data, (obj) => {
return obj.rate * 1;
}),
},
],
};