html柱状图鼠标放到柱上变大,echarts柱状图鼠标悬浮时样式变化问题

想要的效果，当鼠标悬浮某个柱时，该柱能变宽，变大，但不能超出x轴。

现在的情况是，当鼠标悬浮某个柱时，该柱能变宽，变大，但超出x轴。

源码

echart 柱状图 带箭头 调整柱子宽度 设置柱子颜色 hover时改变柱子颜色

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

grid: {

top: '10%',

left: '3%',

right: '10%',

bottom: '3%',

containLabel: false

},

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu'],

axisLabel: {

show: false

},

axisTick: {

show: false

},

axisLine: {

symbol: ['none', 'arrow'],

symbolSize: [5, 7],

lineStyle: {

color: '#979797'

}

}

},

yAxis: {

type: 'value',

axisLabel: {

show: false

},

axisTick: {

show: false

},

splitLine: {

show: false

},

axisLine: {

symbol: ['none', 'arrow'],

symbolSize: [5, 7],

lineStyle: {

color: '#979797'

}

}

},

series: [{

data: [120, 200, 150, 80],

type: 'bar',

barCategoryGap:'80%', //调整柱子宽度

itemStyle: {

color: '#62A1A9' //设置柱子颜色

},

emphasis: {

itemStyle: {

color: '#2F4654', //hover时改变柱子颜色

// shadowColor: 'rgba(102,102,102,0.50)',

// shadowOffsetX: 0,

// shadowOffsetY: 2,

// shadowBlur: 6,

borderWidth: 4,

borderColor: '#2F4654',

borderType: 'solid'

}

},

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);