ECharts 统计图中的bar（条形统计）的X轴上的值的显示方法_echarts 如何图形出来后统计显示各个x轴的数量-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_chenli/article/details/51445341

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"
                   }
                   //横坐标上的文字斜着显示 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);