使用JavaScript 绘制折线图

<th:block th:include="include :: header('百度ECharts')"/>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>折线图</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="graph_flot.html#">选项1</a>
                        </li>
                        <li><a href="graph_flot.html#">选项2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-line-chart"></div>
            </div>
        </div>
    </div>
</div>

 

<script type="text/javascript">

    $(document).ready(function () {
        $.ajax({
            cache: false,
            async: false,
            url: "/dev/test/list",
            type: "post",
            // datatype: "json",
            success: function (data) {
                // var str, str1;var lineChartData=[91, 91, 95 , 93, 92, 93, 94];
                // var lineChartDataX=['周一','周二','周三','周四','周五','周六','周日']

                var MAX = 8;
                var lineChartData=new Array();
                var lineChartDataX=new Array();
                var breakdownRate=new Array();

                // console.log(data.myList[0]);
                // console.log(data.dates[0]);
                // console.log(data.breakdownRate[0]);
                for (var i = 0; i < MAX; i++){
                    lineChartData[i] = data.myList[i];
                    lineChartDataX[i] = data.dates[i];
                    breakdownRate[i] = data.breakdownRate[i];
                }

                var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                var lineoption = {
                    title: {
                        text: '设备开机、停机率'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['设备开机率', '设备故障停机率']
                    },
                    grid: {
                        x: 40,
                        x2: 40,
                        y2: 24
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: lineChartDataX
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '设备开机率',
                            type: 'line',
                            data: lineChartData,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '设备故障停机率',
                            type: 'line',
                            data: breakdownRate,
                            markPoint: {
                                data: [
                                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                };
                lineChart.setOption(lineoption);
                $(window).resize(lineChart.resize);
            }
        });
    });
</script>