vue echart 散点图画矩形区域
vue echart 散点图画矩形区域
其实没打算写这部分东西来着，但是当时做的时候没找到合适的方式，看到别人写的博客总是觉得博客这种东西就是自己写完之后自己用，能分享一下就分享一下吧。
其实方法很简单，只不过没有接触过的人可能觉得会有点难度，不是难，是没思路，点一下子就好了。
先上图，当时我想做的就是类似于这个样子：
其实就是在散点图上添加这个蓝色的小方块。
做法其实就是在 echart 上画线，一个小方块四条线组成，然后一条线又两个坐标确定。
https://echarts.apache.org/zh/option.html#series-scatter.markLine
上面是官网地址，详细的可以去这里面查看。
然后代码我就不上了，然后最后拼起来的option大体是这个样子。
{
"grid":{
"top":0,
"left":0,
"right":0,
"bottom":0
},
"xAxis":{
"show":false,
"data":[
-4,
-3,
-2,
-1,
0,
1,
2,
3,
4,
5
],
"type":"value",
"splitLine":{
"show":true
},
"max":10
},
"yAxis":{
"type":"value",
"show":false,
"data":[
-4,
-3,
-2,
-1,
0,
1,
2,
3,
4,
5
],
"max":10
},
"series":[
{
"symbolSize":1,
"color":"#fff",
"data":[
[
0,
0
]
],
"type":"scatter",
"markLine":{
"symbol":[
"none",
"none"
],
"silent":true,
"animation":false,
"itemStyle":{
"normal":{
"lineStyle":{
"type":"solid",
"width":1,
"opacity":1
},
"label":{
"show":false,
"position":"left"
}
}
},
"data":[
[
{
"coord":[
1,
9
],
"itemStyle":{
"normal":{
"color":"#8cd5f1"
}
}
},
{
"coord":[
1,
7
],
"itemStyle":{
"normal":{
"color":"#8cd5f1"
}
}
}
],
[
{
"coord":[
1,
7
],
"itemStyle":{
"normal":{
"color":"#8cd5f1"
}
}
},
{
"coord":[
3,
7
],
"itemStyle":{
"normal":{
"color":"#8cd5f1"
}
}
}
],
[
{
"coord":[
3,
7
],
"itemStyle":{
"normal":{
"color":"#8cd5f1"
}
}
},
{
"coord":[
3,
9
],
"itemStyle":{
"normal":{
"color":"#8cd5f1"
}
}
}
],
[
{
"coord":[
3,
9
],
"itemStyle":{
"normal":{
"color":"#8cd5f1"
}
}
},
{
"coord":[
1,
9
],
"itemStyle":{
"normal":{
"color":"#8cd5f1"
}
}
}
]
]
}
},
{
"symbolSize":1,
"color":"#fff",
"data":[
[
10,
10
]
],
"type":"scatter"
}
]
}
最后就是这个样子，其实代码写的有点多，没必要这么多，但是我懒得删除了，需要的话自己根据经验删除修改就行：
