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

效果图：

直接复制粘贴代码到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",//边框和背景颜色一致，（因为无法做到无边框，只能跟随页面背景）
            height:40,//滚动条高度
            showDetail: false,//关闭：拖拽时候显示详细数值信息。
            fillerColor: '#666666',//滚动条颜色
            handleSize: '92%',//矢量尺寸占比
            handleStyle: {
                borderWidth: 0,
                color: '#666666'
            },//SVG图形填充颜色
            handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",//直接画一个圆形SVG矢量路径
            start: 30,//初始化滚动条开始位置
            end: 80, //初始化滚动条结束位置
            showDataShadow: false //屏蔽折线图，true为显示折线图
        }],
        xAxis: [{
            type: 'category',
            data: ['8.1', '8.2', '8.3', '8.4', '8.5', '8.6', '8.7','8.8', '8.9', '8.10', '8.11', '8.12', '8.13', '8.14'],
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#999999',
                fontsize: 12,
                show: false,
            },
        }],
        yAxis: [{
            type: 'value',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#999999',
            },
            splitLine: {
                lineStyle: {
                    color: '#000000',
                    width: 1,
                    opacity: 0.03
                }
            },
        }],
        series: [{
            name: '數據用量',
            type: 'bar',
            barWidth: '70px',
            itemStyle: {
                normal: {
                    barBorderRadius: [6, 6, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                        [{
                            offset: 0,
                            color: '#4169E1'
                        },
                            {
                                offset: 1,
                                color: '#FF4500'
                            }
                        ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                    )
                }
            },
            data: [10, 52, 200, 334, 390, 330, 220,10, 52, 200, 334, 390, 330, 220],
            label: {
                normal: {
                    show: true,
                    position: 'outside',
                    color: '#000000',
                    formatter: function (params) {
                        return params.name;//柱状图顶部显示日期
                    }
                }
            }
        }]
    };

代码中实现的功能有：

一.滚动条:

1.dataZoom滚动条圆角

2.dataZoom滚动条无边框

3.dataZoom滚动条屏蔽折线图

二.柱状图：

1.柱状图渐变色

2.柱状图顶端显示日期

最后，如果对你有用的话，麻烦关注一下博主，谢谢，思密达~~