一.问题背景
在工作中遇到了一个图表需要根据值的大小曲线在图表中的背景展示不同的颜色，并且需要设置不同的值展示不同的颜色，大概是如下的效果，需要在echarts中进行配置出来。
二.实现思路
这个图表的颜色区分的逻辑为0~30为低估，30~70为中估，70以上为高估，实现这个图表需要使用能够给echarts图表根据不同的值划分背景色的属性进行配置。
loadOption() {
this.options = {
grid: {
top: 15,
bottom: 20, // 设置图表的底部边距
left: 40,
right: 30,
},
xAxis: {
type: "category",
// 调整X轴文字方向
data: this.timeArr,
axisLine: {
show: false, // 不显示X轴线
},
axisTick: {
show: false, // 不显示X轴刻度
},
axisLabel: {
interval: this.timeArr.length - 2,
color: "#cccccc", // 设置 y 轴刻度线的颜色
fontSize: 10,
formatter: function (value) {
const date = new Date(
value.toString().replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3")
);
return date.toISOString().split("T")[0];
},
},
},
color: [
"#EEF4F1",
"#FBF2EA",
"#F9E8E8",
],
yAxis: {
type: "value",
scale: true,
splitLine: null,
axisTick: {
lineStyle: {
color: "#cccccc",
},
},
nameGap: 30,
min: 0,
max: 70,
axisLabel: {
color: "#cccccc", // 设置 y 轴刻度线的颜色
fontSize: 10,
formatter: function (value) {
return Number(value).toFixed(2) + "";
},
},
},
series: [
{
name: "低估",
type: "line",
animation: false,
areaStyle: {
normal: {},
},
lineStyle: {
normal: {
width: 1,
},
},
markArea: {
data: [
[
{
yAxis: "0",
},
{
yAxis: "30",
},
],
],
},
},
{
name: "中估",
type: "line",
animation: false,
areaStyle: {
normal: {},
},
lineStyle: {
normal: {
width: 1,
},
},
markArea: {
data: [
[
{
yAxis: "30",
},
{
yAxis: "70",
},
],
],
},
},
{
name: "高估",
type: "line",
animation: false,
areaStyle: {
normal: {},
},
lineStyle: {
normal: {
width: 1,
},
},
markArea: {
data: [
[
{
yAxis: "70",
},
{
yAxis: "100",
},
],
],
},
},
{
data: this.rateArr,
type: "line",
showSymbol: false,
smooth: true,
lineStyle: {
color: "#482E7D", // 设置折线的颜色
width: 1, // 自定义折线的宽度
},
},
],
};
const data = this.options.series[3].data;
this.options.yAxis.max = Math.max(...data) + 20;
this.options.series[2].markArea.data[0][1]["yAxis"] =
Math.max(...data) + 20 + "";
},
三.总结
🥲对梯度背景进行划分主要使用的属性是markArea然后通过这个属性中的data来设置不同背景的值的范围，并且最大值可以根据自己数据的最大值进行重新调整，总之配置echarts本质上就是对一个大的对象进行配置，主要是掌握和记忆一些常用的属性。
