您的位置：首页 > 其它

ECharts 统计图中的bar（条形统计）的X轴上的值的显示方法

2016-05-18 16:49 471 查看

ECharts 框架的 bar 统计图

ECharts 统计图中的bar（条形统计）的X轴上的值的显示方法一共有三种，先上图：

第一种：

第二种：

第三种：

以下是源码：

<!DOCTYPE html>

<html>

<header>

    <meta charset="utf-8">

    

    <script src="../js/echarts.min.js"></script>

    <script src="../js/newline-echarts.js"></script>



</header>

<body>

    

    <div id="main" style="width: 100%;height:250px;"></div>

   <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            barWidth:30,//设置柱状图的宽度为30px 如果不设置barWidth属性宽度会自动变化 ;

            tooltip: {},



            xAxis: {

              type : 'category',

               axisLabel:{

                   //横坐标上的文字斜着显示 begin

                   interval:0,

                   rotate:45,

                   margin:2,

                   textStyle:{

                       color:"#222"

                   }

                   //横坐标上的
b91c
文字斜着显示 end

                   //横坐标上的文字换行显示 begin

                   /* formatter:function(val){

                       return val.split("").join("\n");

                   }*/

                   //横坐标上的文字换行显示 end

               },

                data: ["累计车辆数","使用中","空闲中","维修中","保养中","停用"]

            },

            yAxis: {},

            series: [{



                type: 'bar',

                data: [510, 400, 300, 200, 100, 50],

               itemStyle: {

                       normal: {

                           color: '#F2B752',

                           shadowBlur: 2,

                           shadowColor: 'rgba(3, 3, 4, 0.5)'

                       }

                   }

            }]/*,

           grid: { // 控制图的大小，调整下面这些值就可以，

             x: 40,

             x2: 100,

             y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上

         },*/

        };

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

       //X轴上的值显示不完 3个文字就换行显示引用newline-echarts.js JS

       /*option= newline(option, 3, 'xAxis');*/

        myChart.setOption(option);

    </script>

</body>

</html>

当X轴（横坐标）的值显示不完整是可以使用一下三个方法解决

第一种：字体斜着显示

axisLabel:{

                   //横坐标上的文字斜着显示 begin

                   interval:0,

                   rotate:45,

                   margin:2,

                   textStyle:{

                     color:"#222"

                   }
                      //横坐标上的文字斜着显示 end

第二种：字体竖着显示

axisLabel:{



                   //横坐标上的文字换行显示 begin

                   formatter:function(val){

                       return val.split("").join("\n");

                   }

                   //横坐标上的文字换行显示 end

}
第三种：引用newline-echarts.js文件

//X轴上的值显示不完 3个文字就换行显示引用newline-echarts.js JS 也可以用在Y轴上

       option= newline(option, 3, 'xAxis');

         myChart.setOption(option);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航