Echarts 地图绘制

Echarts 官网地址:https://echarts.baidu.com/

 

绘制中国地图  注意加载两个js库

 

//封装一个地图方法

    function china_map(data){

        //初始化echarts

        var chart = echarts.init(document.getElementById('main'));

        //地图配置文件

        var option = {

            //悬停提示

            tooltip:{

                trigger:'item'

            },

            //图例地图

            visualMap:{

                    //显示与否

                    show:true,

                    //横坐标

                    x:'left',

                    //纵坐标

                    y:'bottom',

                    //颜色纵深

                    splitList:[{start:500,end:600},{start:400,end:500},{start:300,end:400},{start:100,end:200},{start:0,end:100}]

            },

            //载入数据

            series:[{name:'问题数量',type:'map',mapType:'china',data:data}]

        };

 

        //将配置文件载入实例

        chart.setOption(option);

    }

 

    //调用地图

 

    //通过发送ajax请求,将接口数据获取

    $.getJSON('/detail/problem_map',function(data){

        //调用绘图方法

        china_map(data);

 

    });

 

转载于:https://www.cnblogs.com/weifeng-888/p/10828388.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值