echarts+china.js实现中国地图可视化

Question

想要实现中国地图热力图，然而页面却只显示南海诸岛，不显示全部的地图

Answer 1

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/944748
• 这篇博客你也可以参考下：echarts绘制世界地图，中国地图在中间
• 除此之外, 这篇博客: Echarts使用 (带有中国地图的使用)中的 中国地图 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• import "@/utils/china"
  

  这里的需要单独下载,最近官方找不到了

  <template>
    <div class="echarts-map-china" ref="echarts-map-china"></div>
  </template>
  
  <script>
  import "@/utils/china"
  import * as echarts from 'echarts';
  
  export default {
    data() {
      return {
        options: {
          //标题样式
          title: {
            text: 'ECharts 中国地图',
            x: "center",
            textStyle: {
              fontSize: 18,
              color: "black"
            },
          },
          //这里设置提示框 (鼠标悬浮效果)
          tooltip: {
            //数据项图形触发
            trigger: 'item',
            //提示框浮层的背景颜色。 (鼠标悬浮后的提示框背景颜色)
            backgroundColor: "white",
            //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
            formatter: '地区：{b}<br/>模拟数据：{c}'
          },
          //视觉映射组件
          visualMap: {
            top: 'center',
            left: 'left',
            // 数据的范围
            min: 10,
            max: 500000,
            text: ['High', 'Low'],
            realtime: true,  //拖拽时，是否实时更新
            calculable: true,  //是否显示拖拽用的手柄
            inRange: {
              // 颜色分布
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [
            {
              name: '模拟数据',
              type: 'map',
              mapType: 'china',
              roam: true,
              //是否开启鼠标缩放和平移漫游
              itemStyle: {
                //地图区域的多边形 图形样式
                normal: {
                  //是图形在默认状态下的样式
                  label: {
                    show: true,//是否显示标签
                    textStyle: {
                      color: "black"
                    }
                  }
                },
                zoom: 1.5,
                //地图缩放比例,默认为1
                emphasis: {
                  //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                  label: {show: true}
                }
              },
              top: "5%",//组件距离容器的距离
              data: [
                {name: '北京', value: 350000},
                {name: '天津', value: 120000},
                {name: '上海', value: 300000},
                {name: '重庆', value: 92000},
                {name: '河北', value: 25000},
                {name: '河南', value: 20000},
                {name: '云南', value: 500},
                {name: '辽宁', value: 3050},
                {name: '黑龙江', value: 80000},
                {name: '湖南', value: 2000},
                {name: '安徽', value: 24580},
                {name: '山东', value: 40629},
                {name: '新疆', value: 36981},
                {name: '江苏', value: 13569},
                {name: '浙江', value: 24956},
                {name: '江西', value: 15194},
                {name: '湖北', value: 41398},
                {name: '广西', value: 41150},
                {name: '甘肃', value: 17630},
                {name: '山西', value: 27370},
                {name: '内蒙古', value: 27370},
                {name: '陕西', value: 97208},
                {name: '吉林', value: 88290},
                {name: '福建', value: 19978},
                {name: '贵州', value: 94485},
                {name: '广东', value: 89426},
                {name: '青海', value: 35484},
                {name: '西藏', value: 97413},
                {name: '四川', value: 54161},
                {name: '宁夏', value: 56515},
                {name: '海南', value: 54871},
                {name: '台湾', value: 48544},
                {name: '香港', value: 49474},
                {name: '澳门', value: 34594}
              ]
            }
          ]
        }
      };
    },
    mounted() {
      let myEcharts = echarts.init(this.$refs["echarts-map-china"]);
      myEcharts.setOption(this.options);
    }
  };
  </script>
  
  <style lang="less" scoped>
  .echarts-map-china {
    height: 700px;
    width: 900px;
  }
  </style>
  
  

  

• 您还可以看一下 汤小洋老师的【实战】ECharts数据可视化之疫情实时监控展示课程中的 使用Ajax轮询自动获取数据小节, 巩固相关知识点