ok

b40d0752 · 周远喜 · ee1dd764 · b40d0752 · b40d0752 · b40d0752
Commit b40d0752 authored Apr 27, 2021 by 周远喜
Expand all Hide whitespace changes
Inline Side-by-side

Showing with 1198 additions and 1 deletion

gd.html gd.html +107 -0

map.html map.html +62 -1

sz.html sz.html +106 -0

vk.html vk.html +923 -0

No files found.
--- a/gd.html
+++ b/gd.html
+<!--
+    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=map-HK
+-->
+<!DOCTYPE html>
+<html style="height: 100%">
+    <head>
+        <meta charset="utf-8">
+    </head>
+    <body style="height: 100%; margin: 0">
+        <div id="container" style="height: 100%"></div>
+
+        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+        <!-- Uncomment this line if you want to dataTool extension
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
+        -->
+        <!-- Uncomment this line if you want to use gl extension
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
+        -->
+        <!-- Uncomment this line if you want to echarts-stat extension
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
+        -->
+        <!-- Uncomment this line if you want to use map
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
+        -->
+        <!-- Uncomment these two lines if you want to use bmap extension
+        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
+        -->
+
+        <script type="text/javascript">
+var dom = document.getElementById("container");
+var myChart = echarts.init(dom);
+var app = {};
+
+var option;
+
+
+
+myChart.showLoading();
+
+// $.get('https://geo.datav.aliyun.com/areas_v2/bound/440000_full.json', function (geoJson) {
+$.get('https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=370000_full', function (geoJson) {
+
+    myChart.hideLoading();
+
+    echarts.registerMap('guangdong', geoJson);
+
+    myChart.setOption(option = {
+        title: {
+            text: '山东省地图',
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}<br/>{c} (p / km2)'
+        },
+        toolbox: {
+            show: true,
+            orient: 'vertical',
+            left: 'right',
+            top: 'center',
+            feature: {
+                dataView: {readOnly: false},
+                restore: {},
+                saveAsImage: {}
+            }
+        },
+        // visualMap: {
+        //     min: 800,
+        //     max: 50000,
+        //     text: ['High', 'Low'],
+        //     realtime: false,
+        //     calculable: true,
+        //     inRange: {
+        //         color: ['lightskyblue', 'yellow', 'orangered']
+        //     }
+        // },
+        series: [
+            {
+                // name: '香港18区人口密度',
+                type: 'map',
+                mapType: 'guangdong', // 自定义扩展图表类型
+                label: {
+                    show: true
+                },
+                data: [
+                    {name: '青岛市', value: 20057.34},
+                    {name: '日照市', value: 15477.48}
+                ],
+                // 自定义名称映射
+                nameMap: {
+    
+                }
+            }
+        ]
+    });
+});
+
+if (option && typeof option === 'object') {
+    myChart.setOption(option);
+}
+
+        </script>
+    </body>
+</html>
+    
--- a/map.html
+++ b/map.html
@@ -5,8 +5,69 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
+    <!-- <script src="js/echarts.min.js"></script> -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+<style type="text/css">
+#echartMap{
+    height: 500px;
+    background-color: #eee;
+}
+</style>
 </head>
 <body>
-    
+    <div id="echartMap"></div>
+    <script type="text/javascript">
+    console.log("echarts",echarts)
+        // 基于准备好的dom，初始化echarts实例
+        $.get("370000_full.json", function(huaianJson) {
+            console.warn(huaianJson);
+          echarts.registerMap("huaian", huaianJson);
+          var chart = echarts.init(document.getElementById("echartMap"));
+          chart.setOption({
+            backgroundColor: "#404a59",
+            visualMap: {
+              type: "continuous",
+              min: 0,
+              max: 100,
+              text: ["High", "Low"],
+              realtime: false,
+              calculable: true,
+              color: ["#3ADEF1", "#0089FC", "#0057FE"],
+              show: false
+            },
+            series: [
+              {
+                type: "map",
+                map: "qd",
+                roam: false,
+                label: {
+                  normal: {
+                    show: true,
+                    color: "#fff"
+                  },
+                  emphasis: {
+                    show: true
+                  }
+                },
+                itemStyle: {
+                  emphasis: { label: { show: true } }
+                },
+                // data: [
+                //   { name: "金湖县", value: 80 },
+                //   { name: "盱眙县", value: 50 },
+                //   { name: "涟水县", value: 80 },
+                //   { name: "洪泽区", value: 70 },
+                //   { name: "淮阴区", value: 80 },
+                //   { name: "淮安区", value: 40 },
+                //   { name: "清江浦区", value: 50 }
+                // ]
+              }
+            ]
+          });
+        });
+        console.warn("echart",echarts)
+      </script>
+  
 </body>
 </html>
\ No newline at end of file
--- a/sz.html
+++ b/sz.html
+<!--
+    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=map-HK
+-->
+<!DOCTYPE html>
+<html style="height: 100%">
+    <head>
+        <meta charset="utf-8">
+    </head>
+    <body style="height: 100%; margin: 0">
+        <div id="container" style="height: 100%"></div>
+
+        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+        <!-- Uncomment this line if you want to dataTool extension
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
+        -->
+        <!-- Uncomment this line if you want to use gl extension
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
+        -->
+        <!-- Uncomment this line if you want to echarts-stat extension
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
+        -->
+        <!-- Uncomment this line if you want to use map
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
+        -->
+        <!-- Uncomment these two lines if you want to use bmap extension
+        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
+        -->
+
+        <script type="text/javascript">
+var dom = document.getElementById("container");
+var myChart = echarts.init(dom);
+var app = {};
+
+var option;
+
+
+
+myChart.showLoading();
+
+$.get('https://geo.datav.aliyun.com/areas_v2/bound/440000_full.json', function (geoJson) {
+
+    myChart.hideLoading();
+
+    echarts.registerMap('guangdong', geoJson);
+
+    myChart.setOption(option = {
+        title: {
+            text: '广东省地图',
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}<br/>{c} (p / km2)'
+        },
+        toolbox: {
+            show: true,
+            orient: 'vertical',
+            left: 'right',
+            top: 'center',
+            feature: {
+                dataView: {readOnly: false},
+                restore: {},
+                saveAsImage: {}
+            }
+        },
+        visualMap: {
+            min: 800,
+            max: 50000,
+            text: ['High', 'Low'],
+            realtime: false,
+            calculable: true,
+            inRange: {
+                color: ['lightskyblue', 'yellow', 'orangered']
+            }
+        },
+        series: [
+            {
+                name: '香港18区人口密度',
+                type: 'map',
+                mapType: 'guangdong', // 自定义扩展图表类型
+                label: {
+                    show: true
+                },
+                data: [
+                    {name: '汕尾市', value: 20057.34},
+                    {name: '清远市', value: 15477.48}
+                ],
+                // 自定义名称映射
+                nameMap: {
+    
+                }
+            }
+        ]
+    });
+});
+
+if (option && typeof option === 'object') {
+    myChart.setOption(option);
+}
+
+        </script>
+    </body>
+</html>
+    
--- a/vk.html
+++ b/vk.html