Bootstrap

echarts地图(map)

代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图</title>
  </head>
  <style>
    * {
     
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #app {
     
      width: 100vw;
      height: 100vh;
      padding: 400px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .chart {
     
      width: 800px;
      height: 800px;
    }
  </style>
  <body>
    <div id="app">
      <!-- 全国 -->
      <div class="chart" id="chinaMap"></div>
      <!-- 湖南 -->
      <div class="chart" id="HunanMap"></div>
    </div>
  </body>
  <script
    src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
    type="text/javascript"
  ></script>
  <script
    src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"
    type="text/javascript"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
    type="text/javascript"
  ></script>
  <script type="text/javascript">
    new Vue({
     
      el: "#app",
      data: {
     
        // 中国地图分布数据
        chinaDataList: [
          {
     
            nam
;