echarts柱状图调优（1.dataZoom圆角/无边框/屏蔽折线图；2.柱状图渐变色/顶端显示日期）

最新推荐文章于 2025-09-11 09:42:43 发布

原创

最新推荐文章于 2025-09-11 09:42:43 发布 · 4.4k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #调优

本文介绍了如何使用ECharts对柱状图进行优化，包括设置dataZoom滚动条的圆角和无边框效果，以及如何屏蔽滚动条下的折线图。同时，展示了柱状图的渐变色应用，并在柱状图顶端显示日期，提供了一种增强图表视觉效果的方法。

效果图：

直接复制粘贴代码到https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align，来查看效果

option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '11%',
            containLabel: true
        },
        dataZoom: [{
            type: 'slider',
            show: true,//显示滚动条
            zoomLock:true,//锁定滚动条缩放，（固定滚动条长度）
            xAxisIndex: [0],
            left: '5%',//离左边的百分比距离
            bottom: 40,
            borderColor: "#f3f3f3",//边框和