网页 echarts 做图

1.折线图实例

jsp：

<div id="speedInfoMap" style="width: 750px; height: 500px; margin:5px auto;">
</div>

js：

            $.ajax({
                url: window.PATH + "/xxx/xxx/xxxxInfo.ajax",
                dataType: "json",
                async: true,
                data: {
                    device : idList
                },
                type: "GET",
                success: function (res) {
                    if (!res || !res.data) {
                        return;
                    }
                    let data = res.data;
                    let option = {
                        title: {
                            text: '设备测速信息'
                        },
                        tooltip: {
                            trigger: 'axis',
                            // formatter:'{b}<br/>{a0}:{c0}MB,<br/>{a1}:{c1}KB/s,<br/>{a2}:{c2}MB,<br/>{a3}:{c3}KB/s,<br/>'  //添加单位
                            formatter: function(a) {
                                let list = []
                                let listItem = ''
                                for (var i = 0; i < a.length; i++) {
                                    if (i%2==0){
                                        list.push(
                                            '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                                            a[i].color +
                                            ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
                                            a[i].seriesName +
                                            '</span>&nbsp&nbsp：' +
                                            a[i].value +
                                            'MB'
                                        )
                                    } else {
                                        list.push(
                                            '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                                            a[i].color +
                                            ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
                                            a[i].seriesName +
                                            '</span>&nbsp&nbsp：' +
                                            a[i].value +
                                            'KB/S'
                                        )
                                    }

                                }
                                listItem = list.join('<br>')
                                return '<div class="showBox">' + listItem + '</div>'
                            }
                        },
                        legend: {
                            data: ['上行流量','上传速度', '下行流量', '下载速度']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.time
                        },
                        yAxis: {
                            type: 'value'
                          /*  ,
                            axisLabel: {
                                formatter:'{value} (KB/S)' //y轴单位
                            }*/

                        },
                        series: [
                            {
                                name: '上行流量',
                                type: 'line',
                                data: data.upFlow
                            },
                            {
                                name: '上传速度',
                                type: 'line',
                                data: data.upSpeed
                            },
                            {
                                name: '下行流量',
                                type: 'line',
                                data: data.downFlow
                            },
                            {
                                name: '下载速度',
                                type: 'line',
                                data: data.downSpeed
                            }
                        ]
                    };
                    let speedTestMap = echarts.init(document.getElementById('speedInfoMap'));
                    speedTestMap.setOption(option);
                }
            });