echarts柱状图鼠标悬浮时样式变化问题

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

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

源码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>echart 柱状图 带箭头 调整柱子宽度 设置柱子颜色 hover时改变柱子颜色</title>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    </head>
    <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 120px;height:80px;"></div>
    <script type="text/javascript">
        // 基于准备好的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);
    </script>
    </body>
    </html>

0个评论

1个牛币 echarts

所有回答列表(2)

liupengfei LV7 2021年3月2日

borderWidth: 0,

406503223 LV5 2022年4月22日

bottom: '1%',

最热评论
最新问答