tooltip 联动的时候 中间会有断层,视觉效果不好,想问下能否连接这一条直线
配置项如下
let xs = ['2013', '2014', '2015', '2016', '2017', '2018', '2019'];
option = {
axisPointer: {
link: {
xAxisIndex: 'all'
},
label: {
backgroundColor: '#777'
}
},
title: [{
text: '接单量(万平方米)',
left: 60,
top: '2%',
textStyle: {
color: '#000',
fontSize: 14,
fontWeight: 'normal'
}
}, {
subtext: '总GMV(万元)',
subtextStyle: {
color: '#000',
fontSize: 14,
fontWeight: 'normal',
},
left: 60,
top: '48%',
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
type: 'dashed'
}
},
backgroundColor: 'rgba(245, 245, 245, 0.8)',
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
// position: function(pos, params, el, elRect, size) {
// var obj = {
// top: 10
// };
// obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
// return obj;
// }
},
color: ['#7AF6FC', '#FEC721', '#0AE7CC'],
grid: [{
x: '5%',
y1: '5%',
height: '35%',
left: '10%',
show: true
},
{
x: '5%',
y2: '5%',
height: '40%',
left: '10%',
show: true
//bottom: '5%'
}
],
xAxis: [{
show: false, //隐藏了x轴
type: 'category',
gridIndex: 0, //对应前面grid的索引位置(第一个)
axisTick: {
show: false
},
axisLabel: {
//interval:showNum, //x轴显示的数量,我这里是动态算的
},
data: xs,
},
{
type: 'category',
gridIndex: 1, //对应前面grid的索引位置(第二个)
axisTick: {
show: false
},
axisLabel: {
//interval:showNum,
},
data: xs,
}
],
//y轴,不管有几个x轴,几个y轴,或者图,只要找到他对应的grid图的序号索引就可以精准匹配
yAxis: [{
type: 'value',
gridIndex: 1, //对应前面grid的索引位置(第二个)
splitLine: {
show: true
},
offset: 10,
nameTextStyle: {
padding: 25,
align: 'center'
},
position: 'left',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
gridIndex: 0,
nameTextStyle: {
padding: 40
},
offset: 10,
position: 'left',
nameLocation: 'middle',
splitLine: {
show: true
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 12 //y轴坐标轴上的字体大小
}
},
},
],
series: [{
name: '接单量',
type: "line",
xAxisIndex: 0,
yAxisIndex: 1,
data: [28, 27, 40, 72, 100, 123, 247]
},
{
type: 'bar',
stack: '总量',
barWidth: 30,
xAxisIndex: 1,
yAxisIndex: 0,
data: [28, 27, 40, 72, 100, 123, 247]
},
{
type: 'bar',
stack: '总量',
barWidth: 30,
xAxisIndex: 1,
yAxisIndex: 0,
data: [20, 27, 60, 52, 60, 103, 147]
}
]
};