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);

    });

猜你喜欢

转载自www.cnblogs.com/weifeng-888/p/10828388.html