Skip to content

Q
qd-demo
Commit dfe049c0 authored by 任金涛's avatar 任金涛
Browse files
Options

Merge branch 'master' of 39.98.128.195:zhouyx/qd-demo into rjt20210426frommaster

parents 38159f6f b40d0752
Pipeline #122 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 1198 additions and 1 deletion
      gd.html 0 → 100644
      View file @ dfe049c0
      <!--
      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>
      map.html
      View file @ dfe049c0
      ......@@ -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
      sz.html 0 → 100644
      View file @ dfe049c0
      <!--
      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>
      vk.html 0 → 100644
      View file @ dfe049c0
      This diff is collapsed.
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment