使用Echarts写出一个漂亮的柱状图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Echarts写出一个漂亮的柱状图相关的知识,希望对你有一定的参考价值。

参考技术A 这里卿洋
愿喜❤️

echarts 柱状图由于数据太多导致数组柱重叠

参考技术A 使用echarts 柱状图 犹豫x轴上的数据太多,导致柱状图叠在一起

我的解决办法是

X=x轴上的数据组

var namenum=Math.floor(100/(X.length/5));         //  这个5  可以顺便调整    是用来判断当前视图要显示几个

       if (X.length>6)                                          //  6也可以调整     用来判断是否显示滚动条

            var showEchart=true;

          else

            var showEchart=false;

          ,

  dataZoom: [                      //   这是滚动条

   

        show: showEchart,  // 是否展示

        xAxisIndex: [0],  // 控制第一个x轴

        height: 15,

        left: 100,

        right: 100,

        bottom: 0,

        start: 0,  // 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。

        end: namenum,  // 数据窗口范围的结束百分比。范围是:0 ~ 100。

        handleSize: "110%",

        zoomLock: true, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true

    ,

    ]

改过之后

可以进行滚动条操作当前数据

以上是关于使用Echarts写出一个漂亮的柱状图的主要内容,如果未能解决你的问题,请参考以下文章

echarts柱状图间距怎么设置

echarts在柱状图轴线上添加图片

怎么动态给echarts柱状图添加柱子

echarts 柱状图 怎么排序

echarts 柱状图由于数据太多导致数组柱重叠

echarts 3D柱状图配置项