Layer+Echarts构建弹出层折线图

在HTML文件中引入
    <script src="js/jquery-1.11.1.min.js"></script>
    <!-- 你必须先引入jQuery1.8或以上版本 -->
    <script src="js/layer/layer.js"></script>
    <script src="js/bootstrap.min.js"></script>
     <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>

页面内容

<body>
        <button id="test2">Layer+Echarts构建弹出层折线图</button>
        <div id="speedChart" style="display: none;">
                                    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
                                    <div id="speedChartMain" style="width: 600px; height: 400px;"></div>
                                </div>
        <div id="dfd">
            <span>Layer+Echarts构建弹出层折线图</span>
            <p>Layer+Echarts构建弹出层折线图</p>
        </div>

</body>

js脚本

<script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('speedChartMain'));
        option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {

        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        //弹出一个页面层
        $('#test2').on('click', function() {
            layer.open({
                title:'hello world',
                type: 1,
                shade: false,
                area: ['620px', '460px'],
                shadeClose: false, //点击遮罩关闭
                content: $("#speedChart")
            });
        });
    </script>

当然以上是静态加载,我们平常使用最多的是异步加载,修改一下代码即可:

<div id="speedChart" style="display: none;">
        <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
        <div id="speedChartMain" style="width: 600px; height: 400px;"></div>
</div>

$(document).ready(function() {
            option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:[]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: []
                };

            //按钮提交表单数据
            $("#subSpeed").click(function(){
                // 基于准备好的dom,初始化echarts实例
                var myChart = echarts.init(document.getElementById('speedChartMain'));              
                // 使用刚指定的配置项和数据显示图表。 
                myChart.setOption(option);
                var url=$("#speedFrom").attr("action");
                var times=[];    //時間数组(实际用来盛放X轴坐标值)
                var speeds=[];    //速度数组(实际用来盛放Y坐标值)
                $.post(url,$("#speedFrom").serialize(),
                    function(data, status){
                        if(data!=null){
                            for (var i = 0; i < data.length; i++) {
                                times.push(data[i].timeStamp);
                                speeds.push(data[i].speed);
                            }
    //之前option中legend和 XAxis的data,series 为空,所以现在将数据填充进去
                            myChart.setOption({        //加载数据图表
                                legend: {
                                    data:[$("#roads").val()]
                                },
                                xAxis: {
                                    data: times
                                },
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: $("#roads").val(),
                                    type:'line',
                                    data: speeds
                                }]
                            });
                        }

                        layer.open({
                            title:'折线图',
                            type: 1,
                            shade: false,
                            area: ['620px', '460px'],
                            shadeClose: true, //点击遮罩关闭
                            content: $("#speedChart")
                        });
                },"json");
            });
        });

转自:https://blog.csdn.net/vili_sky/article/details/78870207

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

使用新浪微博登陆