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

最新推荐文章于 2024-06-08 21:17:27 发布

毛小兔

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量4k

点赞数 4

分类专栏：前端文章标签： echarts 调优

本文链接：https://blog.csdn.net/maoziyang1996/article/details/107964698

版权

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

摘要由CSDN通过智能技术生成

效果图：

直接复制粘贴代码到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,//锁定滚动条缩放，&#