echarts 柱狀圖 X（Y）軸數據過多時，滑動以及內置縮放的問題

 

前言：在開發中碰到的情況（菜鳥出門）。

          在使用echarts 圖表的時候發現要展示的數據過多，但是系統留的展示框太小，造成數據都擠壓在一塊（不好看而且新感覺很不專業）。

          在網上找了下發現寫的都很亂，就自己整理下。

  -------------------------------------------------------------------------------------------------------------------

   注： 自己調試的時候發現兩種使用的情況，可以根據做自己的需求來

 

一 . 在數據不是太多，並且要全部展示的情況下

上圖：

代碼：

yAxis: {
    type: 'category',
    data: ['張小勇1','李思思2','張明明3'],
    axisLabel:{
        //數據全部展示
        interval:0,
        //45度角傾斜
        rotate:45,
    },
},

   這種情況就是改變要展示數據的傾斜角度（在Y不明細，在X上很適用），如果要展示全部數據的話很好用

 

二 . 在數據過多，要加滑動的情況

  上圖：

 

代碼：Y滑動框

// Y滑動框
                dataZoom: [
                   //Y軸滑動條
                    {
                        type: 'slider', //滑動條
                        show: true,      //開啟
                        yAxisIndex: [0],
                        left: '93%',  //滑動條位置
                        start: 1,    //初始化時，滑動條寬度開始標度
                        end: 50      //初始化時，滑動條寬度結束標度
                   },
                   //y軸內置滑動
                    {
                        type: 'inside',  //內置滑動，隨鼠標滾輪展示
                        yAxisIndex: [0],
                        start: 1,//初始化時，滑動條寬度開始標度
                        end: 50  //初始化時，滑動條寬度結束標度

　　　　　　　　　　　　} ],

　　

 代碼：X滑動框

// X滑動框
                dataZoom: [ 
　　　　　　　　　　　　　//X軸滑動條

                    {
                        type: 'slider', //滑動條
                        show: true,      //開啟
                        xAxisIndex: [0],
                        left: '93%',  //滑動條位置
                        start: 1,    //初始化時，滑動條寬度開始標度
                        end: 50      //初始化時，滑動條寬度結束標度
                   },
                  //X軸內置滑動
                    {
                        type: 'inside',  //內置滑動，隨鼠標滾輪展示
                        xAxisIndex: [0],
                        start: 1,//初始化時，滑動條寬度開始標度
                        end: 50  //初始化時，滑動條寬度結束標度
　　　　　　　　　　　　} ],

　　

如X，Y軸都要開啟的話，將上面所有的都復制就好。如需單獨一個，選擇性復制就可以正常使用。

 

附錄：借鑒文檔

echarts滑動實例 ： https://www.echartsjs.com/examples/en/editor.html?c=doc-example/scatter-dataZoom-all

echarts文檔：  https://www.echartsjs.com/zh/option.html#dataZoom