ECharts_03_折线图

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>
1.演示结果

2.代码

猜你喜欢
