echarts实现折现图绘制

    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="/static/bootstrap/js/jquery.min.js"></script>
    <script src="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/frame/echarts/echarts.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var sys_series = {{ sys_series|safe }};
            var sys_record_date = {{ record_date|safe }};
            var sys_name = {{ sys_name|safe }};
            sys_display(sys_record_date, sys_name, sys_series);
        });

        //各系统异常次数统计
        function sys_display(sys_record_date, sys_name, sys_series) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('line_echarts_sys'));
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '各系统异常次数统计',
                    y: 'top'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: sys_name,
                    y: 'bottom'
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    bottom: '25%',
                    top: '15%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: sys_record_date,
                },
                yAxis: {
                    type: 'value'
                },
                series: sys_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="line_echarts_sys" class="layui-card-body" style="width: 100%;height:350%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

image.png

echarts官方实例