关于echarts渲染地图过程中的前后端传值问题

开发环境：django；最写了一个小项目，其中一个功能是对自己获取的地震数据（包含经纬度和震级）进行前端地图渲染。过程中遇到了前端echarts地图渲染失败的问题，网上的解决方案多没详细解释自定义数据的问题，后来也是自己捣鼓了好一会儿才调试成功。现在项目完了有时间了决定分享一下解决思路供大家参考。

大体思路是：后端view.py视图文件中通过render函数传递参数到前端，前端构造开源插件echarts.js所需变量。

那么首先看一下后端传递数据的过程：

        dataset['GPS'] = list(Earthquakes.objects.order_by('-earthquake_time').values_list('earthquake_location','earthquake_level','earthquake_location_lon','earthquake_location_lat'))
        return render(request, 'positions/index.html', dataset)

后端数据如下：

前端使用模板语言“ {{}} ”接收数据的代码如下（注意：由于echarts中geoCoordMap需要的是字典，但django模板语言中不能对字典进行循环生成，所以这里采用了一个较笨的方法再js里面对字符串进行分割后重新构造成字典。究其本质还是我对django的数据传输理解不够才无奈使用笨方法构造字典，大家要是有方法可以直接从后端传递字典到前端的话欢迎在评论中给出方案）：

        var myChart = echarts.init(document.getElementById('allmap'));
        var data = [
            {% for x in GPS %}
                {name:"{{x.0}}",value:"{{x.1}}"},
            {% endfor %}
        ];
        
        var geoCoordMap2 = [
            {% for x in GPS %}
                "{{x.0}}"+","+{{x.2}}+","+{{x.3}},
            {% endfor %}
        ];
        var geoCoordMap3 = {}
            for(var i = 0, j = geoCoordMap2.length; i < j ; i++){
            var obj = {};
            var newArr = geoCoordMap2[i].split(',');
            var coord = [parseFloat(newArr[1]), parseFloat(newArr[2])]
            geoCoordMap3[newArr[0]] = coord;
            }
        var geoCoordMap = geoCoordMap3;

到这里我们就完成构建echarts所需的数据格式啦~(效果如下)。

var data = [
     {name: '俾斯麦海', value: 5.4}]

var geoCoordMap = {
    '海门':[149.57,-4.61]}

 在echarts官网实例中要求data变量和geoCoordMap变量中的地名数量必须要相同，经过测试只要地名数量不对等则无法显示，但底图因是bmap的所以可以正常显示。最终效果图如下：