学习使用echarts因xAxis值过多，可以滚动的柱状图解决方案

已于 2024-04-11 18:07:20 修改
阅读量240 收藏
点赞数 2
分类专栏： Echarts Javascript Jquery 文章标签： 学习 前端 javascript
于 2024-04-01 16:55:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/137239182
版权
Javascript 同时被 3 个专栏收录
224 篇文章 5 订阅
订阅专栏
Jquery
181 篇文章 1 订阅
订阅专栏
Echarts
39 篇文章 11 订阅
订阅专栏

学习使用echarts因xAxis值过多，可以滚动的柱状图解决方案

效果图

在这里插入图片描述

柱状图代码

function echarts() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

        let xaxisData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'];
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            "legend": {

                "data": [
                    {"name": "2023年"},
                    {"name": "2024年"},
                    {"name": "完成率"}
                ],
                "top": "0%",
                "textStyle": {
                    "color": "rgba(255,255,255,0.9)"//图例文字
                }
            },
            "label": {
                "show": true, //开启显示
                "position": 'top', //在右侧显示:right,
                "textStyle": {
                    "color": "rgba(255,255,255,0.9)"//图例文字
                }
            },
            "xAxis": [
                {
                    "type": "category",

                    //data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    data: xaxisData,
                    axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                    axisLabel: {
                        textStyle: {color: "rgba(255,255,255,.6)", fontSize: '14',},
                    },

                },
            ],
            "yAxis": [
                {
                    "type": "value",
                    "name": "金额",
                    "min": 0,
                    "max": 10000,
                    "interval": 100,
                    "show": false,
                    "axisLabel": {
                        "show": false,//控制是否显示：true,false
                    },
                    axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},//左线色

                },
                {
                    "type": "value",
                    "name": "完成率",
                    "show": true,
                    "axisLabel": {
                        "show": true,//控制显示

                    },
                    axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},//右线色
                    splitLine: {show: true, lineStyle: {color: "#001e94"}},//x轴线
                },
            ],

            "grid": {
                "top": "10%",
                "right": "30",
                "bottom": "30",
                "left": "2%",
            },
            dataZoom: [

                {

                    xAxisIndex: 0, //这里是从X轴的0刻度开始

                    show: false, //是否显示滑动条，不影响使用

                    type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件

                    startValue: 0, // 从头开始。

                    endValue: 12, // 一次性展示4个。

                },

            ],

            "series": [
                {
                    "name": "2023年",
                    "type": "bar",
                    // "data": [123437323, 123578456, 412345636, 912345676, 295532188, 645232535, 434534523, 666673453, 335665340, 334345326, 442323428, 124553222],
                    "data": [111, 222, 333, 444, 555, 666, 777, 888, 999, 1010, 1111, 1212, 1313, 1414, 1515, 1616, 1717, 1818, 1919, 2020, 2121, 2222, 2323, 2424, 2525, 2626, 2727, 2828, 2929, 3030],
                    "barWidth": "auto",
                    label: {
                        show: true, // 是否显示标签
                        position: 'top', // 标签位置，可选值为：top、bottom、center、inside（柱状图内部）、outside（柱状图外部）
                        textStyle: {
                            color: '#FF00FF', // 标签字体颜色
                            fontSize: 14, // 标签字体大小
                            fontWeight: 'bold', // 标签字体加粗
                            fontStyle: 'italic', // 标签字体斜体
                            fontFamily: 'Arial' // 标签字体
                        }
                    },
                    "itemStyle": {
                        "normal": {
                            "color": {
                                "type": "linear",
                                "x": 0,
                                "y": 0,
                                "x2": 0,
                                "y2": 1,
                                "colorStops": [
                                    {
                                        "offset": 0,
                                        "color": "#609db8"
                                    },

                                    {
                                        "offset": 1,
                                        "color": "#609db8"
                                    }
                                ],
                                "globalCoord": false
                            }
                        }
                    }
                },
                {
                    "name": "2024年",
                    "type": "bar",
                    "data": [
                        //  423332331, 789142442, 334354524, 135534536, 247448338, 845533436, 444545222, 209876532, 313226542, 665367567, 246854533, 156554458
                        11, 22, 33, 44, 55, 66, 77, 88, 99, 110, 111, 121, 133, 141, 155, 166, 171, 188, 199, 202, 212, 222, 233, 242, 252, 262, 277, 288, 299, 300
                    ],
                    "barWidth": "auto",

                    "itemStyle": {
                        "normal": {
                            "color": {
                                "type": "linear",
                                "x": 0,
                                "y": 0,
                                "x2": 0,
                                "y2": 1,
                                "colorStops": [
                                    {
                                        "offset": 0,
                                        "color": "#66b8a7"
                                    },
                                    {
                                        "offset": 1,
                                        "color": "#66b8a7"
                                    }
                                ],
                                "globalCoord": false
                            }
                        }
                    },
                    "barGap": "0"
                },
                {
                    "name": "完成率",
                    "type": "line",
                    "yAxisIndex": 1,

                    "data": [
                        //  100, 50, 80, 30, 90, 40, 70, 33, 100, 40, 80, 20
                        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
                    ],
                    lineStyle: {
                        normal: {
                            width: 2
                        },
                    },
                    "itemStyle": {
                        "normal": {
                            "color": "#cdba00",

                        }
                    },
                    "smooth": true
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。

        /*        myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });*/

        console.log('111option.dataZoom===', option.dataZoom);
        console.log('111option.dataZoom[0].endValue===', option.dataZoom[0].endValue);
        console.log('111xaxisData.length===', xaxisData.length);


        timeInterval = setInterval(() => {

            console.log('222option.dataZoom===', option.dataZoom);
            console.log('222option.dataZoom[0].endValue===', option.dataZoom[0].endValue);
            console.log('222xaxisData.length===', xaxisData.length);

            if (option.dataZoom[0].endValue == xaxisData.length) {

                option.dataZoom[0].endValue = 5;

                option.dataZoom[0].startValue = 0;

            } else {

                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;

                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;

            }

            myChart.setOption(option);

        }, 2000);

    }

关键代码

setInterval定时器来实现的自右向左的滚动；

 timeInterval = setInterval(() => {

            console.log('222option.dataZoom===', option.dataZoom);
            console.log('222option.dataZoom[0].endValue===', option.dataZoom[0].endValue);
            console.log('222xaxisData.length===', xaxisData.length);

            if (option.dataZoom[0].endValue == xaxisData.length) {

                option.dataZoom[0].endValue = 5;

                option.dataZoom[0].startValue = 0;

            } else {

                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;

                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;

            }

            myChart.setOption(option);

        }, 2000);

dataZoom: [

                {

                    xAxisIndex: 0, //这里是从X轴的0刻度开始

                    show: false, //是否显示滑动条，不影响使用

                    type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件

                    startValue: 0, // 从头开始。

                    endValue: 12, // 一次性展示4个。

                },

            ],
徊忆羽菲
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据可视化Echarts学习(2)：柱图任务进度完成比例图属性练习柱图堆叠
01-20
option = { title:{ text:'漏刻有时任务进度属性练习', x:'center' }, xAxis: { show:false, type: 'value', }, yAxis: { type: 'category', axisLine:{show:false}, axisTick:{show:false}, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
echarts 柱状图数据过多时自动滚动
最新发布
peppa_pig的博客
01-26 532
当我们柱状图中X轴数据太多的时候，会自动把柱形的宽度挤的很细，带来的交互非常不好，我们可以用dataZoom属性来解决。如果需要自动滚动，需要再加个定时器，还可以在标签上设置鼠标放上去停止滚动。简易的版本，横向滚动。
十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全
weixin_55181759的博客
11-02 9437
✨参照官网，dataZoom中有两个对象如下，这样写是因为type分为与两种缩放方式，当type类型不同时，里面配置的属性略有不同，请根据实际需求使用✨其他属性请参考一下内容💕解释xAxisIndex、yAxisIndex、、的含义及用法，以xAxisIndex为例filter。
在Echarts图中给坐标轴加一个标识线markLine
11-20
Echart3数据可视化视图 给坐标轴加一个标识线markLine 当X轴不是数值时，而是一个类型数据，如年份，公司名，企业名，这时Echarts图就不是从X轴起始位置开始的，所以我们就要给X轴加一个虚拟的值’0’，在markLine中也是在赋值起始位置X轴值时，放置虚拟数据，并且设置一个boundaryGap: 0,可以让坐标轴与刻度之间空白变为0，这时标示线就从X轴起始位置开始了，详细属性可以去Echarts官网查看。 这里还要说一句在设置markLine下面data值时{x:”,//代表的是容器内x的值，y:”,容器内y的值}，如果要设置在坐标轴内的标示线，就要设置xAxis和yAxis
利用echarts绘制地图的geojson（包含国家，省，市），有实现实例
05-30
1.ECharts的geojson地图数据下载(全国地图json、各省、市)有demo 2.包含一个cityName.js城市对照表 3.index.js是鲫鱼react的开发的模块，可以直接使用
echarts---x轴数据过多,设置x轴左右滑动显示
zyue_1217的博客
07-05 4834
【代码】echarts---x轴数据过多,设置x轴左右滑动显示。
echarts x轴数据过多左右滚动显示
Dnn01的博客
10-20 8193
echarts x轴数据过多左右滚动显示 今天在使用echarts做柱状图时，遇到x轴数据过多的情况，全部显示的话，柱状图都挤到一起了。 所以想让它可以显示一部分，其余部分滚动显示，就可以配置dataZoom，它与xAxis、yAxis并列，简单配置后，就可以实现x轴刻度左右滚动了。 代码如下： dataZoom: [ { type: "slider", show: true, xAxisIndex: [0],
echarts 图表设置 滚动条
zhang_zan
08-10 4124
echarts图表设置滚动条
echarts 常见问题（增加滚动条、X轴文本数据太长、字体颜色、标签对齐方式、循环颜色、图表位置）
m0_38082271的博客
06-08 5217
echarts 常见问题（增加滚动条、X轴文本数据太长、字体颜色、标签对齐方式、循环颜色、图表位置）
echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
热门推荐
細水、長流√的专栏
09-10 1万+
echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
echarts实现获取datazoom的起始值(包括x轴和y轴)
11-20
我就废话不多说了，大家还是直接看代码吧~ let option = {} //你的echarts图表的配置，这里我就不贴我的了 myChart.setOption(option); //开始 let startValue = myChart.getModel().option.dataZoom[0].startValue; let endValue = myChart.getModel().option.dataZoom[0].endValue; let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴 le
Echarts+Vue3.0 大数据可视化项目，大数据可视化大屏系统源码
02-27
柱状图效果实现2--XAxis，yAxis, 饼状图基本设置, 饼状图效果实现, 折线图基本设置, 折线图效果实现, 折线图堆叠效果, 散点图基本效果设置, 散点图效果实现, K线图, k线图效果优化, 雷达图, 雷达图效果...
使用pyecharts无法import Bar的解决方案
12-20
使用pip install pyecharts 安装的是最新版，本人默认回车后安装1.1.0版本，出现如图问题： 解决方法：(推荐第二种) 方法1： from pyecharts.charts import Bar 方法2： 1.卸载pyecharts：pip uninstall ...
Python3 pyecharts生成Html文件柱状图及折线图代码实例
01-19
代码如下 pip3 install pyechatrs #! /usr/bin/python3 from pyecharts.charts import Bar, Page from pyecharts import options as opts ...bar.add_xaxis(xaxis_data=x) #设置y轴 bar.add_yaxis(seri
echarts自定义分组，x轴分级，支持多级，支持dataZoom
03-31
以柱状图为例，实现echarts自定义分组，x轴分级，支持多级，支持dataZoom
js中使用split()方法拆分字符串
徊忆羽菲
11-19 1万+
JS中的split方法，拆分字符串split介绍 split介绍 格式：要拆分的字符串.split(拆分依据的字符) 例如该文中的例子，拆分人名，电话，地址。该文中用了个文本框，文本框中需要输入的格式是：人名，电话，地址。 该例子中用了一个文本框的初始值，该方法可以把字符串拆分成多个小的字符串，例如本文依据的是中文的逗号，凡是遇到逗号，都会被拆分，一共有两个逗号，分隔了三段字符串。 把拆分号的内容...
js中获取json对象的key名称的两种方法
徊忆羽菲
09-06 1万+
javascript获取json对象的key名称的两种方法第一种方法第二种方法 第一种方法 var obj = {'name' : '奇葩天地网' , 'url' : 'www.qipa250.com' , 'age' : '14'}; for (key in obj){ console.log(key); } 结果 第二种方法 javascript中，Object具有一个key属性，可以返回json对象的key的数组 （Object has a property keys, returns
如何通过jquery修改id名和class名的方法
徊忆羽菲
06-25 1万+
如何通过jquery修改id名和class名的方法attr() 方法设置或返回被选元素的属性值。 动态修改div样式的时候会用到 attr() 方法设置或返回被选元素的属性值。 //jquery修改id名： <div id="top"></div> $("#qipa250").attr('id','newQipa250');//之后变成：<div id="ne...
使用jQuery跳转到指定页面
徊忆羽菲
05-09 1万+
使用jQuery跳转到指定页面js重定向使用jQuery属性替换方法 js重定向 1、利用http的重定向来跳转 window.location.replace("http://www.qipa250.com"); 2.使用href来跳转 window.location.href = "http://www.qipa250.com"; 使用jQuery属性替换方法 $(location).attr('href', 'http://www.qipa250.com'); $(window).attr('lo
echarts柱状图柱子过多自动滚动
09-28
echarts柱状图当柱子过多时，可以通过添加滚动条来实现自动滚动。具体步骤如下： 1. 首先，在echarts的初始化配置中设置x轴的type为'scrollbar'，并设置其他相关配置，如柱子的宽度、颜色等。 2. 然后，在xAxis的data中设置所有的数据项，包括需要显示的和需要轮播的数据项。 3. 在option中添加toolbox，并设置toolbox的feature中的dataView、dataZoom和restore为true，以开启数据视图、数据缩放和重置功能。 4. 最后，根据需求设置柱子的轮播方式，可以通过在series中设置animation和animationEasing等参数来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值