【Echarts】图表制作—折线图

1.引入 echarts.js

     <script type="text/javascript" src="/static/js/echarts.js"></script>

2.为ECharts准备一个具备大小（宽高）的Dom

    <div id="container" style="border-style: solid;border-width: 0px;color:#666666;height: 430px;"></div>

3.初始化echarts实例

    var myChart = echarts.init(document.getElementById('container'));
    $.get('/admin/devData/sendqueueshow').done(function (data) {
                if (data != null) {
                    var series = [];
                    for (var i = 0; i < data.channelList.length; i++) {
                        series.push({
                            name: data.channelList[i],
                            type: 'line',
                            data: data.sendQueueList[i],
                            // markPoint: {
                            //     data: [
                            //         {type: 'max', name: '最大值'},
                            //         {type: 'min', name: '最小值'}
                            //     ]
                            // }
                        });
                    }
    
                    myChart.resize();
                    myChart.clear();		//清除旧图
                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            x: 5,   //左侧与y轴的距离
                            y: 12,   //top部与x轴的距离
                            x2: 20,   //右侧与y轴的距离
                            y2: -6,    //bottom部与x轴的距离},
                            containLabel: true
                        },
                        xAxis: [{
                            show: false,
                            type: 'category',
                            data: data.timeList,
                            axisLabel: {                        //字体
                                show: true,
                                textStyle: {
                                    // color: '#666666',
                                    color: '#ffffff',
                                    fontSize: '12'
                                }
                                // interval:0,                     //隔几个标签显示一个标签
                                // rotate:40                       //标签倾斜角度
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            axisLabel: {                        //字体
                                show: true,
                                textStyle: {
                                    // color: '#666666',
                                    color: '#ffffff',
                                    fontSize: '12'
                                }
                            }
                        }],
                        series: series
                    })
                }
     });