option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
boundaryGap: true
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Box Plot',
type: 'boxplot',
data: [
[100, 200, 300, 400],
[150, 230, 310, 420],
[220, 320, 450, 480],
[300, 370, 550, 580],
[400, 520, 650, 700]
],
markArea: {
data: [
[{
name: '标域1',
xAxis: 'Category1',
itemStyle: {
color: 'rgba(0, 200, 0, 0.3)' // 标域颜色
}
}, {
xAxis: 'Category3'
}],
[{
name: '标域2',
yAxis: 200,
itemStyle: {
color: 'rgba(200, 0, 0, 0.3)' // 标域颜色
}
}, {
yAxis: 500
}]
]
},
// 其他配置...
}
]
};
在上述例子中,markArea 中的 data 数组包含了两个标域,每个标域由两个点(左上角和右下角)定义。你可以通过 xAxis 和 yAxis 指定这两个点的坐标,以及通过 itemStyle 来设置标域的颜色。在这个例子中,两个标域分别在 x 轴的 'Category1' 到 'Category3' 范围内和 y 轴的 200 到 500 范围内。
请根据实际需要修改坐标和样式,以满足你的可视化需求。
转载请注明出处:http://www.zyzy.cn/article/detail/5426/ECharts