一.問題背景
在工作中遇到了一個圖表需要根據值的大小曲線在圖表中的背景展示不同的顏色，並且需要設定不同的值展示不同的顏色，大概是如下的效果，需要在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本質上就是對一個大的物件進行配置，主要是掌握和記憶一些常用的屬性。
