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

电玩女神 2023-10-05 08:34 3阅读 0赞

#### 1 使用详解 ####

**dataZoom.type**

说明：组件类型。

默认值：'slider'。

参数类型：string。

可选值：

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

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

#### 2 原始效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 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坐标轴加滚动条） ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200817192101388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200817192649212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70