- 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 `<div style="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轴开始位置
}],
]
},
},
]
}
