大数据可视化之---echarts地图组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
    <script src="lib/jquery.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <!-- 
        1.准备中国的矢量地图json文件，放到json/map的目录下
        2.使用Ajax获取china.json
            $.get('json/map/china.json',function(chinaJson){})
        3.在回调函数中往echarts全局对象中注册地图的json数据
        echatrs.registerMap('chinaMap',chinaJson)
        4.在geo下设置
            type: 'map',
            map: 'chinaMap'
     -->
     <!-- 引入jsonMap文件跨域：
        1.开启一个服务 2.jsonp 3.script获取
        本实例采用方式一:ECharts 请求本地地图json文件数据 跨域问题 解决方案：右键Open with Live Serve打开
     如右键没有Open with Live Serve，vscode需安装Live Serve插件
    live-server是可以运行前端静态文件的一个服务器，既然我们要前后端分离，
    所以就需要单独将html代码运行起来，这里我们选择live-server，等到后边真正部署的时候在用nginx-->
 
    <!-- 常用配置
        拖动缩放：roam:true
        名称显示: label
    -->
     <script>
         var mCharts = echarts.init(document.querySelector("div"))
        //  ajax直接请求访问本地文件(下载插件liveserver 插件解决跨域)
        $.get('json/china.json',function(ret){
            // ret就是中国的各省份的矢量地图数据
            // console.log(ret);
            echarts.registerMap('chinaMap',ret)
            var option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap',
                    roam: true, // 设置允许缩放以及拖动的效果
                    label: {
                        show: true // 展示标签
                    },
                    zoom: 1, // 设置初始化的缩放比例 
                    center: [87.617733, 43.792818], // 中心点
                }
            }
            mCharts.setOption(option)
        })
         
     </script>
</body>
</html>