巧用echarts的markArea制作背景图
2022-11-15 本文已影响0人
Frank_Fang
scatter-simple.png
option = {
xAxis: {
min: 0,
max: 10,
splitNumber: 10
},
yAxis: {
min: 0,
max: 10,
splitNumber: 10
},
series: [
{
data: [
[5.0, 8.04, 6],
[8.07, 6.95, 9],
[3.0, 7.58, 2],
[9.05, 8.81 ,3],
[1.0, 8.33, 2],
[4.0, 7.66, 1],
[3.4, 6.81, 4],
[8.0, 6.33, 7],
[4.0, 8.96, 8],
[2.5, 6.82, 2],
[3.15, 7.2, 1],
[6.5, 7.2, 5],
[3.03, 4.23, 2],
[2.2, 7.83, 1],
[2.02, 4.47, 1],
[1.05, 3.33, 8],
[4.05, 4.96, 9],
[6.03, 7.24, 3],
[2.0, 6.26, 6],
[1.0, 8.84, 8],
[7.08, 5.82, 9],
[5.02, 5.6, 8]
],
type: 'scatter',
symbolSize: (val) => {
if (val && val[2]) {
return val[2] / 100 * 500
} else {
return 1
}
},
markLine: {
silent: true,
symbol: ['none', 'none'],
data: [{
name: 'hLine',
yAxis: 5,
lineStyle: {
color: '#000',
type: 'dashed',
dashOffset: 20
}
},
{
name: 'vLine',
xAxis: 5,
lineStyle: {
color: '#000',
type: 'dashed',
dashOffset: 20
}
}],
label: {
show: false
}
},
markArea: {
data: [
[
{
name: 'Midway',
itemStyle: {
color: '#ff0',
opacity: 0.05
},
label: {
color: '#ea0',
position: 'insideTopLeft'
},
xAxis: 0,
yAxis: 10
},
{
xAxis: 5,
yAxis: 5
}
],
[
{
name: 'Good',
itemStyle: {
color: '#0f0',
opacity: 0.05
},
label: {
position: 'insideTopRight'
},
xAxis: 5,
yAxis: 10
},
{
xAxis: 10,
yAxis: 5
}
],
[
{
name: 'Bad',
itemStyle: {
color: '#f00',
opacity: 0.05
},
label: {
color: '#f00',
position: 'insideBottomLeft'
},
xAxis: 0,
yAxis: 5
},
{
xAxis: 5,
yAxis: 0
}
],
[
{
name: 'Midway',
itemStyle: {
color: '#ff0',
opacity: 0.05
},
label: {
color: '#ea0',
position: 'insideBottomRight'
},
xAxis: 5,
yAxis: 5
},
{
xAxis: 10,
yAxis: 0
}
],
]
}
}
]
};
