ECharts之柱状图详解

1、引入echarts.js文件

点解下载echarts.js

<!-- 引入echarts 图形化展示 -->
<script type="text/javascript" src="${ctxStatic}/common/yuzhong/js/echarts/echarts.js"></script>

2、HTML代码

<div class="t2_box_con" style="padding:0px 10px 0px;">
    <!-- 此处加载图像 -->
    <div id="xzbjl" style="width: 100%; height: 242px;"></div>
</div>

3、配置数据和加载图像

<script type="text/javascript">
    var XData = "['周一', '周二', '周三', '周四', '周五']";
    var YData1 = "[10, 25, 21, 25, 36]";
    var YData2 = "[40, 28, 45, 36, 12]";
    var YData3 = "[15, 56, 34, 21, 8]";
    var xzbjl = echarts.init(document.getElementById("xzbjl"));
    option = {
        /* 柱状图颜色 */
        color:['#06a45f', '#078ed6', '#e3982f'],
        /* 四周边距(单位默认px，可以使用百分比) */
        grid:{
            left:40,
            top:30,
            right:50,
            bottom:30
        },
        /* 鼠标悬浮显示数据 */
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
             }
        },
        /* 图例说明 */
        legend: {
            // 图例排项 vertical-"竖向"; horizontal-"横向"
            orient: 'horizontal',
            // 图例组件离容器左侧的距离
            right : 40,
            top: 0,
            // 图例文字的样式
            textStyle:{
                color:'#6ab2ec',
            },
            // 与series中每个name对应 
            data:['数据一','数据二', '数据三']
        },
        toolbox: {
            show : true
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                //设置轴线的属性
                 axisLine:{
                     lineStyle:{
                         color:'#6ab2ec',
                     }
                 },
                //调整x轴的lable
//                axisLabel:{   
//                    textStyle:{
//                        fontSize:10 // 让字体变小
//                    },
//                    rotate: 30,    // 字体倾斜30度
//                },
                data : xData,
            }
        ],
        yAxis : [
            {
                type : 'value',
                 // 控制网格线是否显示
                 splitLine: {
                    show: true, 
                    //  改变轴线颜色
                    lineStyle: {
                        // 使用深浅的间隔色
                        color: ['#132a6e']
                     }                            
                 },
                  //设置轴线的属性
                 axisLine:{
                     lineStyle:{
                         color:'#6ab2ec',
                     }
                 } 
            }
        ],
        series : [
            {
                name:'数据一',
                type:'bar',
                /* 柱子的显示宽度 */
                barWidth: '20%',
                data: yData1,
                /* 显示平均线 */
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
                /* 显示柱子数据 */
                label: {
                    normal: {
                        show: true,
                        // 数据在柱子头部显示
                        position: 'top',
                        textStyle: {
                          color: '#5475c7',
                          fontSize:16,
                        }
                    }
                },
            },
            {
                name:'数据二',
                type:'bar',
                barWidth: '20%',
                data: yData2,
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                },
            },
            {
                name:'数据三',
                type:'bar',
                barWidth: '20%',
                data: yData3,
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    xzbjl.setOption(option);

4、效果图

6、在线调试（ECharts官网）

ECharts官网-在线调试-柱状图