echarts实现柱状图绘制

    <script src="/static/bootstrap/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/frame/echarts/echarts.min.js"></script>

    <script>
        $(function () {

            //本周与上周各系统异常次数对比
            var sys_bar_id = 'bar_echarts_sys'
            var sys_bar_title = '近期服务异常统计对比'
            var sys_bar_legend = {{sys_bar_legend|safe}};
            var sys_x_data = {{sys_x_data|safe}};
            var sys_bar_series = {{sys_bar_series|safe}};
            echarts_bar(sys_bar_id, sys_bar_title, sys_bar_legend, sys_x_data, sys_bar_series);

        //柱状图
        function echarts_bar(id, title, legend, x_data, series) {
            for (var i = 0; i < series.length; i++) {
                series[i]['label'] = {
                    'normal': {
                        'show': true,
                        'position': 'top',
                        'distance': 7,
                        'align': 'center',
                        'verticalAlign': 'middle',
                        'rotate': 0,
                        'fontSize': 18,
                    }
                }
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));

            // 指定图表的配置项和数据
            option = {
                color: ['#006699', '#e5323e'],
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legend
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    data: x_data,
                },
                yAxis: [
                    {
                        type: 'value',
                    },
                ],
                series: series
            };
            ;
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
    </script>

    <!--上周与本周各系统异常次数统计柱状图对比-->
    <div class="layui-col-md12" style="padding-top: 20px ">
        <div class="layui-fluid">
            <div class="layui-col-md12">
                <div class="panel_style">
                    <div class="layui-row layui-col-space18">
                        <div class="card_style layui-col-md12">
                            <div class="card_style">
                                <div class="layui-card">
                                    <div id="bar_echarts_sys" class="layui-card-body" style="width: 100%;height:380%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

image.png

echarts官方实例