lb_hard 2020-03-25 12:04 采纳率: 0%
浏览 387

我这里现在有一个纯用前端js写的中国地图页面,我不知道这个该如何与后台交互,跪求各路大神求教

图片说明

图片说明

<script>
        var myChart = echarts.init(document.getElementById('main') );
        var options = {
            backgroundColor: '#323c48',
            title: {
                text: '开户统计',
                subtext: 'china',
                left: 'center',
                textStyle:{
                    color: '#fff',
                    fontSize:16,
                    fontWeight:'normal',
                    fontFamily:"Microsoft YaHei"
                },
                subtextStyle:{
                    color: '#ccc',
                    fontSize:13,
                    fontWeight:'normal',
                    fontFamily:"Microsoft YaHei"
                }
            },
            //提示框的触发方式
            tooltip: {
                trigger: 'item',
                formatter: function(params) {  
                    var res = params.name+'<br/>';  
                    var myseries = options.series[0].data;
                    if(Tools.isDataValid(myseries)){
                        for(var i = 0; i < myseries.length; i++){
                        if(myseries[i].name==params.name){
                                res+="已开通总数:"+myseries[i].value+"<br/>登记录入总数:"+myseries[i].zlr+"<br/>当日已开通:"+myseries[i].drkt+"</br>当日登记录入:"+myseries[i].drlr
                            }
                        }
                        return res;
                    }
                }  
            },
            toolbox:{
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                iconStyle:{
                    normal:{
                        color:'#fff'
                    }
                },
                feature:{
                    restore:{
                        title:"还原"
                    },
                    saveAsImage:{
                        title:"保存为图片"
                    },
                    dataView:{
                        title:"数据视图",
                        readOnly: true,
                        optionToContent: function(opt) {
                            var series = opt.series[0].data;
                            var table = '<table class="datatableview" style="width:100%;text-align:center"><tbody><tr>'
                                         + '<th rowspan="2">省份</th>'
                                         + '<th colspan="2">统计日期当前</th>'
                                         + '<th colspan="2">截止到统计日期</th>'
                                         + '</tr>'
                                         + '<tr>'
                                         + '<th>已开通</th>'
                                         + '<th>登记录入</th>'
                                         + '<th>已开通</th>'
                                         + '<th>登记录入</th>'
                                         + '</tr>'
                                for (var i = 0, l = series.length; i < l; i++) {
                                    if(Tools.isDataValid(series[i].value)){
                                        table += '<tr>'
                                              + '<td>' + series[i].name + '</td>'
                                              + '<td>' + series[i].drkt + '</td>'
                                              + '<td>' + series[i].drlr + '</td>'
                                              + '<td>' + series[i].value + '</td>'
                                              + '<td>' + series[i].zlr + '</td>'
                                              + '</tr>';
                                    }
                                }
                            table += '</tbody></table>';
                            return table; 
                        }
                    }
                }
            },
            //分段视觉映射组件
            visualMap: {
                type:'piecewise',
                show: true,
                left:'left',
                top:'1%',
                textStyle:{
                    color:'#fff'
                },
                seriesIndex: 0,
                pieces: []
            },

            //系列列表      
            series: [
            ],
            animationDuration:1000,
            animationEasing:'cubicOut',
            animationDurationUpdate:1000
        };

    </script>

这其中还加载了几个js和好多json文件,实在是不知道怎样和后台交互

  • 写回答

2条回答 默认 最新

  • 珍妮玛•黛金 博客专家认证 2020-03-25 13:48
    关注

    你是指地图数据从后台获取吗?还是省市区下钻呢?不管什么数据,你后台组织好数据ajax 请求获取json就可以了啊,然后echarts里面的series就可以用获取的json进行数据展示

    评论

报告相同问题?

悬赏问题

  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮