ECharts_03_折线图

来源：互联网发布：手机网络兼职日结工资编辑：程序博客网时间：2024/06/03 22:45
1.演示结果

这里写图片描述
2.代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <script type="text/javascript" src="../js/echarts.js" ></script>        <title></title>    </head>    <body>        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->        <div id="main" style="width: 600px;height:400px;"></div>        <script>        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        function fetchData(cb) {            // 通过 setTimeout 模拟异步加载            setTimeout(function () {                cb({                    categories: ['7:10','7:20','7:30','7:40','7:50','8:00','8:10','8:20'],                    data: ['43','41','40','24','53','47','50','55']                });            }, 2000);        }        var option = {            //背景色            backgroundColor:'#091323',            //全局线条颜色            color: ['#38b4ee'],            //图表标题设置            title: {                //标题文本                text: '端口流量监控图',                //副标题                subtext: '单位（MB）',                //位置                left: 'center',                //标题样式                textStyle: {                      //标题颜色                    color: 'white'                  }            },            //提示框工具            tooltip: {                //axis 表示坐标系的提示框                trigger: 'axis'            },            //x轴设置            xAxis: {                //坐标轴名称                name: '时间',                //坐标轴名称的样式                nameTextStyle:{                    color: '#ffffff'                },                //坐标轴类型（value,category,time,log）                type: 'category',                //坐标轴两边留白策略                boundaryGap: false,                //坐标轴刻度设置                axisTick:{show:false},                //坐标轴刻度标签设置                axisLabel:{                    textStyle:{                        color:'#dededf'                    }                },                //网格线                splitLine:{                    show: true,                    lineStyle:{                        color:['#23303f'],                        type:'solid'                    }                },                data: ['7:00','7:10','7:20','7:30','7:40','7:50','8:00','8:10']            },            yAxis: {                min:0,                max:100,                //坐标轴分割间隔                interval:20,                axisTick:{show:false},                axisLine:{                    show:false,                //    onZero:false                },                axisLabel:{                    textStyle:{                        color:'#dededf'                    }                },                splitLine:{//网格线                    show: true,                    lineStyle:{                        color:['#23303f'],                        type:'solid'                    }                }            },            series: [                {                    name:'流量',                    type:'line',                    smooth:true,                    symbolSize:12,                    data:['48','43','41','40','24','53','47','50'],                    label: {                        normal: {                            show: false,                            position: 'top'//值显示                        }                    }                },                {                    name:'流量2',                    type:'line',                    smooth:true,                    //圈圈大小                    symbolSize:12,                    //不显示圈圈                    showSymbol: false,                    //圈圈样式                    symbol: 'circle',                    data:['10','12','14','24','34','33','27','10'],                    label: {                        normal: {                            show: false,                            position: 'top'//值显示                        }                    },                    //区域填充颜色                    areaStyle: {                        normal: {                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                                offset: 0,                                color: 'rgba(199, 237, 250,0.5)'                            }, {                                offset: 1,                                color: 'rgba(199, 237, 250,0.2)'                            }], false)                        }                    },                    //线条颜色                    itemStyle: {                        normal: {                            color: '#f7b851'                        }                    },                },            ]        };              // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);        fetchData(function (data) {            myChart.hideLoading();            myChart.setOption({                xAxis: {                    data: data.categories                },                series: [{                    // 根据名字对应到相应的系列                    name: '流量',                    data: data.data                }]            });        });        </script>    </body></html>
阅读全文
0 0