echarts坐标轴箭头被背景遮挡,层级问题
- echarts怎么让坐标轴的箭头不被背景遮挡,
- 怎么在不修改data顺序的情况下修改echarts配置或者echartsAPI来做到默认测试一重叠层级在测试一上边
echarts预览数据如下
let marksData = [
{
"indexName": "测试一重叠",
"value": [77,20],
"indexCode": "x",
"color": "#fb5c5f"
},
{
"indexName": "测试一",
"value": [75,19.51],
"indexCode": "x",
"color": "#fb5c5f"
},
{
"indexName": "测试二",
"value": [26.79,73.83],
"indexCode": "x",
"color": "#999"
},
{
"indexName": "测试三",
"value": [100,83.76],
"indexCode": "x",
"color": "#999"
},
{
"indexName": "测试四",
"value": [39.29,39.40 ],
"indexCode": "x",
"color": "#999"
},
{
"indexName": "测试五",
"value": [28.57,27.98],
"indexCode": "x",
"color": "#999"
}
]
const seriesList = []
marksData.map(item=>{
seriesList.push({
type: 'scatter',
data: [item],
color:'red',
backgroundColor:'green',
tooltip:{
show:false
},
markPoint:{
symbol: 'pin',
symbolSize:[70,20],
symbolOffset:[0,'-50%'],
data:[
{
coord:item.value,
value:item.indexName
}
],
label:{
color:'#000',
backgroundColor:'rgba(255,255,255,0.8)',
borderWidth:1,
borderColor:'#ccc',
borderRadius:10,
padding:[5,10,5,10],
},
itemStyle:{
color:'rgba(0,0,0,0)',
}
},
})
})
option = {
tooltip: {
trigger:'item',
position: function (pos, params, dom, rect, size) {
// console.log(pos,size)
return [pos[0]-45,pos[1]-45];
},
backgroundColor:'rgba(0,0,0,0)',
borderWidth:0,
extraCssText:'box-shadow:0 0 0 rgba(0,0,0,0)',
formatter: function(e){
// console.log(e)
return `"background-color:#fb5c5f;border-radius:20px;padding:2px 7px;color:#fff;">${e.data.value}`
}
},
grid: {
left: 0,
right: 10,
bottom: 0,
top: '6%',
containLabel: true
},
xAxis: {
scale: true,
boundaryGap : false,
interval:33,
max:100,
min:0,
axisLine: {
show:true,
symbol:['none','arrow'],
lineStyle: {
color: '#999',
},
},
axisTick:{
show:false
},
axisLabel: {
color: '#999',
formatter: function(value){
if(value==99)
return '情绪'
}
},
splitLine: {
show:true,
lineStyle: {
color: '#999',
type:'dashed'
}
}
},
yAxis: {
scale: true,
boundaryGap : false,
interval:33,
max:100.1,
min:0,
axisLine: {
symbol:['none','arrow'],
lineStyle: {
color: '#999',
}
},
axisLabel: {
color: '#999',
formatter: function(value){
if(value==99)
return '\n估\n值'
}
},
splitLine: {
show:true,
lineStyle: {
color: '#999',
type:'dashed'
}
},
axisTick:{
show:false
},
},
series: [
...seriesList,
{
type: 'scatter',
data: [],
z:1,
zlevel :1,
// 各象限区域
markArea: {
silent: true,
data: [
[{
name: '谨慎追高',
xAxis: 66.1, // x 轴开始位置
yAxis: 100, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#fffaf5',
},
label: {
position: ['35%','20%'],
color: '#ff8d1f',
fontSize: 14
}
}, {
xAxis: 100,
yAxis: 66.1, // y轴开始位置
}],
[{
name: '空',
xAxis: 33.1,
yAxis: 100, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#fff'
},
label: {
position: 'inside',
color: 'rgba(0, 0, 0, 0)',
fontSize: 22
}
}, {
xAxis: 66, // x 轴结束位置
yAxis: 66.1 // y轴开始位置
}],
[{
name: '布局良机',
xAxis: 0.1,
yAxis: 100, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#fff9f9'
},
label: {
position: ['10%','20%'],
color: '#fb676a',
fontSize: 14
}
}, {
xAxis: 33, // x 轴结束位置
yAxis: 66.1 // y轴开始位置
}],
// -----
[{
name: '空',
xAxis: 66.1, // x 轴开始位置
yAxis: 66, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#fff'
},
label: {
position: 'inside',
color: 'rgba(0, 0, 0, 0)',
fontSize: 22
}
}, {
xAxis: 100,
yAxis: 33.1, // y轴开始位置
}],
[{
name: '暂时观望',
xAxis: 33.1,
yAxis: 66, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#fff'
},
label: {
position: 'inside',
color: '#ffbe48',
fontSize: 14
}
}, {
xAxis: 66, // x 轴结束位置
yAxis: 33.1 // y轴开始位置
}],
[{
name: '空',
xAxis: 0.1,
yAxis: 66, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#fff'
},
label: {
position: 'inside',
color: 'rgba(0, 0, 0, .0)',
fontSize: 22
}
}, {
xAxis: 33, // x 轴结束位置
yAxis: 33.1 // y轴开始位置
}],
// -----
[{
name: '检视持仓',
xAxis: 66.1, // x 轴开始位置
yAxis: 33, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#f5fbf9'
},
label: {
position: ['35%','70%'],
color: '#039967',
fontSize: 14
}
}, {
xAxis: 100,
yAxis: 0.1, // y轴开始位置
}],
[{
name: '空',
xAxis: 33.1,
yAxis: 33, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#fff'
},
label: {
position: 'inside',
color: 'rgba(0, 0, 0, 0)',
fontSize: 22
}
}, {
xAxis: 66, // x 轴结束位置
yAxis: 0.1 // y轴开始位置
}],
[{
name: '左侧布局',
xAxis: 0.1,
yAxis: 33, // y 轴结束位置(直接取最大值)
itemStyle: {
color: '#f5faff'
},
label: {
position: ['10%','70%'],
color: '#0c81ff',
fontSize: 14
}
}, {
xAxis: 33, // x 轴结束位置
yAxis: 0.1 // y轴开始位置
}],
]
},
},
]
}
需要解决的问题
- 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：解决echarts图表柱状图超出坐标轴的问题
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^