ECharts 使用dataZoom.type给x坐标轴加滚动条

1 使用详解

dataZoom.type

说明：组件类型。

默认值：'slider'。

参数类型：string。

可选值：

        （1）'slider'，滑动条型数据区域缩放组件，有单独的滑动条，用户在滑动条上进行缩放或漫游。

        （2）'inside'，内置型数据区域缩放组件，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。

2 原始效果图

3 实现代码（给x坐标轴加滚动条）

var option = {
    title: {
        text: '第一个 ECharts 实例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子",
            "衬衫2","羊毛衫2","雪纺衫2","裤子2","高跟鞋2","袜子2"]
    },
    yAxis: {},
    dataZoom: [
        {
            //默认为滚动条型数据区域缩放组件
            show: true,
            start: 60,
            end: 0
        },
    ],
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20,
            15, 20, 26, 10, 30, 20],
    }]
};

 4 最终效果图（给x坐标轴加滚动条）