使用echarts画柱状图

前言：
echarts是百度出品一款报表插件，图表展示十分的丰富，在我们的开发中使用也比较广泛，但是官方的样例都是十分简单的，好在他们的api文档提供了特别多的配置项，这就为我们画更丰富的图表提供了可能性。
使用echarts遇到过的坑：

• 一定要给图表容器添加宽度与高度。
• 图表在容器中可以调整位置，让图表显示的更完整。

今日分享重点：画柱状图。
1.引入相关js

<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../echarts-4.2.0/echarts.min.js"></script>

2.确定容器

<div id="bar" style="width: 600px;height: 325px;">
</div>

3.定义画折线图是方法，配置图表参数

/**
 * 画柱状图
 * @param container 容器
 * @param xData x轴数据
 * @param seriesData 图表数据
 */
function drawBar(container, xData, seriesData) {
    var myCharts = echarts.init(document.getElementById(container));
    myOption = {
        //提示框组件
        tooltip : {
            //鼠标悬浮到某柱子时触发的提示信息类型
            trigger : 'item',
            position : 'top',
            formatter : '{c}'
        },
        //图形位置
        grid : {
            left : '4%',
            right : '4%',
            bottom : '4%',
            top : 30,
            //图形位置包含坐标轴的刻度标签
            //如果图形位置调整好缺不包含坐标轴，坐标轴信息会显示不全
            containLabel : true
        },
        xAxis : [ {
            type : 'category',
            //x轴线样式
            axisLine : {
                show : true,
                lineStyle : {
                    color : 'rgba(255,255,255,0.2)',
                    //x轴想要设置为轴线隐藏，width设置为0
                    width : 1,
                    type : 'dashed'
                }
            },
            //x轴字体样式
            axisLabel : {
                show : true,
                fontSize : 12,
                color : 'white',
                //x轴坐标全部显示
                interval : 0
            },
            data : xData
        } ],
        yAxis : [ {
            type : 'value',
            //y轴字体样式
            axisLabel : {
                show : true,
                color : 'white',
                fontSize : 12
            },
            //y轴线样式
            axisLine : {
                show : false
            },
            //设置与x轴平行的线(分割线)不显示
            splitLine : {
                show : false,
                lineStyle : {
                    //如果显示，设置分割线的宽度，设置为0的话，即为分割线不显示
                    width : 1
                }
            }
        } ],
        series : [ {
            type : 'bar',
            //柱子宽度
            barWidth : '20',
            //柱子间隔
            barGap : '20',
            itemStyle : {
                color : {
                    type : 'linear',
                    x : 0,
                    y : 0,
                    x2 : 0,
                    y2 : 1,
                    colorStops : [ {
                        offset : 0,
                        color : '#6ae6dd' // 0% 处的颜色
                    }, {
                        offset : 1,
                        color : '#3b8ce4' // 100% 处的颜色
                    } ]
                },
                barBorderRadius : [ 30, 30, 0, 0 ],
            },
            //柱状图悬浮或者跳动到某柱子时样式
            emphasis : {
                itemStyle : {
                    color : {
                        type : 'linear',
                        x : 0,
                        y : 0,
                        x2 : 0,
                        y2 : 1,
                        colorStops : [ {
                            offset : 0,
                            color : 'rgba(254,136,94,1)' // 0% 处的颜色
                        }, {
                            offset : 1,
                            color : 'rgba(251,46,73,1)' // 100% 处的颜色
                        } ]
                    }
                }
            },
            data : seriesData
        } ]
    };
    myCharts.setOption(myOption);

    var app = {};
    app.currentIndex = -1;
    var myTimer = setInterval(
        function() {
            var dataLen = myOption.series[0].data.length;
            if ((app.currentIndex < dataLen - 1)
                    && myOption.series[0].data[app.currentIndex + 1].value == 0) {
                myCharts.dispatchAction({
                    type : 'downplay',
                    seriesIndex : 0,
                    dataIndex : app.currentIndex
                });
                app.currentIndex = (app.currentIndex + 1) % dataLen;
            } else {
                // 取消之前高亮的图形
                myCharts.dispatchAction({
                    type : 'downplay',
                    seriesIndex : 0,
                    dataIndex : app.currentIndex
                });
                app.currentIndex = (app.currentIndex + 1) % dataLen;
                // 高亮当前图形
                myCharts.dispatchAction({
                    type : 'highlight',
                    seriesIndex : 0,
                    dataIndex : app.currentIndex
                });
                // 显示 tooltip
                myCharts.dispatchAction({
                    type : 'showTip',
                    seriesIndex : 0,
                    dataIndex : app.currentIndex
                });
            }
        }, 3000);
}

4.调用方法，传递参数

var xData = ['滨海', '乡村', '历史文化', '主题乐园', '自然景观', '红色旅游', '工业旅游', '亲子游', '休闲度假', '其他'];
var seriesData = [ {
    value : 56
}, {
    value : 156
}, {
    value : 256
}, {
    value : 86
}, {
    value : 96
}, {
    value : 36
}, {
    value : 126
}, {
    value : 176
}, {
    value : 261
}, {
    value : 121
} ];
drawBar('bar', xData, seriesData);

5.划重点

• 在定义的方法中，一些需要动态变化展示的样式、数据等定义成了方法的参数，可以根据不同的展示需求传递不同的参数，其它的样式根据页面风格已经写成固定样式。
• 固定样式只是api中的一部分，如果还想图表展示的更丰富、更动态化，可以参考官方api，配置方式大同小异。

6.上图

柱状图.png