echarts动态绑定地图数据（使用立即执行函数或者变量赋值都可以，唯一要求赋值的是对象，而不是字符串）

最新推荐文章于 2024-08-05 05:00:00 发布

往生净土乘愿再来

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量1.6k

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/liuqiaoying_lqy/article/details/80801931

版权

本文展示了如何使用ECharts动态绑定地图数据，通过JavaScript的Ajax获取数据并进行地图展示。文中提供了完整的代码示例，包括设置地图、动态加载ECharts库以及配置选项，实现了地图上的数据渲染和标记功能。

摘要由CSDN通过智能技术生成

@{
    Layout = null;
}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>

<div id="mainMap" style="height:370px;width: 700px;">
    </div>

    <script type="text/javascript" src="~/js/mapjs/jquery-1.8.0.js"></script>
    <script src="~/js/mapjs/echarts.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $('#document').ready(function () {
            getEcharts();
        });
    </script>

    <script type="text/javascript">
        //ECharts Lqy
        function getEcharts() {
            // Step:3 conifg ECharts's path, link to echarts.js from current page.
            // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
            require.config({
                paths: {
                    echarts: '../../js/mapjs'
                }
            });
            ajax获取也可以
            var provinces = [];
            var value = [];
            var top1provinces = '';
            Test();
            function Test() {
                $.ajax({
                    async: false,             //默认为true，改为false 则为同步请求
                    type: "post",
                    url: "/ScreenDisplay/EchartMap",
                    data: "",
                    dataType: "json",
                    success: function (Jsondata) {
                        var data = Jsondata.data;
                        $.each(Jsondata.data, function (key, val) {
                            if (key == 0) {
                                top1provinces = val.key;
                                //alert("第一名" + top1provinces);
                            }
                            provinces.push(val.key);
                            value.push(parseInt(val.Value));
                            //如果确少某个城市的经纬度，地图显示异常。
                            //alert(val.key + "   " + val.Value);
                        });

                        //top1provinces = '南京';
                        //provinces.push('南京'); value.push(1);
                        //provinces.push('杭州'); value.push(1);
                        //provinces.push('阜阳'); value.push(1);
                        //provinces.push('福州'); value.push(1);
                        //provinces.push('上海'); value.push(1);
                        //{"code":0,"msg":"","data":[{"key":"南京市","Value":"1"},{"key":"杭州市","Value":"1"},{"key":"阜阳市","Value":"1"},{"key":"福州市","Value":"1"},{"key":"上海市","Value":"1"}],"info":null}

                        //alert("provinces " + provinces.toString() + " value " + value.toString());
                    }
                });

        }
            // Step:4 require echarts and use it in the callback.
            // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
            require(
                [
                    'echarts',
                    'echarts/chart/map'
                ],
                function (ec) {
                    // --- 地图 ---
                    var myChart2 = ec.init(document.getElementById('mainMap'));
                    myChart2.setOption({
                        dataRange: {
                            min: 0,
                            max: 100,
                            calculable: true,
                            color: ['lime', 'lime'],
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        series: [
                            {

最低0.47元/天解锁文章

往生净土乘愿再来

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。