echarts + 百度地图实现散点图

项目需求 echarts + 百度地图实现散点图

最近一直在使用echarts做项目 领导突然给提了一个需求 ，就是要我用echarts实现地图散点数据， 对于当时一直在使用echarts的我来说，感觉不就是小事一碟嘛，这不是有手就行？？？
真到去做的时候才发现我是那么的天真 ，经过我不断的思考和查阅资料，最总还是解决了，中间解决问题的这段过程真的收益匪浅，说到底还是不够了解。

• 初始准备
  首先创建一个vue项目 下载echarts第三方包 可以npm下载 也可以到github下载
• 在页面引入 ceharts 我这这里使用的是 5 以上的版本

// echarts 5 以下的版本 和 5 以上的版本引入的方式 还是有差别的 
import  echarts from 'echarts'; // 这是 5 以下的版本引入的方法
import * as echarts from "echarts"; // 这是 5 以上的版本引入的方法

在这说明一下 5 以下得到版本里面是有一个map文件的 里面放的就是地图数据
但是在5 以上的版本中 移除了map文件 如果需要可以到 5 一下的版本里面clone一份 也可以自己到github找最新的资源

• 申请百度AK
• 这里只提供链接 具体如何申请 就不多说了

接下来就是你还要到百度地图开放平台注册自己的账号

在vue项目中的做法

（1）引入baiduAPI
（2）这个访问应用（AK）就是你要在vue项目中public下的 index.html 文件中引入javascript脚本匹配的ak值

 <script src="//api.map.baidu.com/api?type=webgl&v=2.0&ak=你的密钥"></script>

• 接下来就要在你所对应的文件夹引入bmap包

import * as echarts from "echarts";
require("echarts/extension/bmap/bmap"); // 这个必须要引入 不然会找不到bmap地图包
import { loadBMap } from "../map.js";

• 还要创建一个map.js 用来导入百度AK值

export function loadBMap(ak) {
  return new Promise(function(resolve, reject) {
      if (typeof BMap !== 'undefined') {
          resolve(BMap)
          return true
      }
      window.onBMapCallback = function() {
          resolve(BMap)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src =
          'http://api.map.baidu.com/api?v=2.0&ak='+ ak +'&__ec_v__=20190126&callback=onBMapCallback'
      script.onerror = reject
      document.head.appendChild(script)
  })
}

• 然后再mounted 生命周期里面调用

 mounted() {
    this.$nextTick(() => {
      loadBMap("你的密钥").then(() => {
        this.myEcharts();  // echarts 实列
      });
    });
  },

总体的代码就是

<template>
  <div>
    <div class="chart" ref="chart"></div>
    <div
      v-for="(item,index) in buttonList"
      :key="index"
      :class="btnClick == index ? 'active' : ''"
      @click="roamMap(index)"
    >{{item}}</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/extension/bmap/bmap");
import { loadBMap } from "../map.js";

export default {
  name: "Home",
  components: {
    HelloWorld
  },
  data() {
    return {
      // 点击放大缩小按钮
      buttonList: ["+", "-"],
      btnClick: 1,
      myChart: null
    };
  },
  mounted() {
    console.log(echarts, "echarts");

    this.$nextTick(() => {
      loadBMap("你的密钥").then(() => {
        this.myEcharts();
      });
    });
  },
  methods: {
    myEcharts() {
      this.myChart = echarts.init(this.$refs.chart);

      var myData = [
        { name: "上海", value: [121.480539, 31.235929] },
        { name: "合肥", value: [117.27, 31.86] },
        { name: "招远", value: [120.38, 37.35, 142] },
        { name: "舟山", value: [122.207216, 29.985295, 123] }
      ];

      var option = {
        tooltip: {
          formatter: function(params) {
            var value = params.value;
            return `<div style="text-align: left;padding: 0 0.05rem">
                       <div style="line-height: 24px;">
                       <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#2ECA9C;"></span>
                        <span>
                          ${
                            params.name == undefined || params.name == null
                              ? "-"
                              : params.name
                          }
                          </span>
</div>
</div>

            `;
          }
        },

        bmap: {
          center: [121.480539, 31.235929], // 中心位置坐标
          zoom: 6, // 地图缩放比例
          roam: true // 开启用户缩放
        },
        visualMap: {
          // 视觉映射组件
          show: false,
          type: "continuous",
          min: 0,
          max: 200,
          calculable: true,
          
          inRange: {
            color: ["#2ECA9C"], // 散点的颜色
            symbolSize:10,  // 散点的大小
          },
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "销量",
            type: "scatter",
            coordinateSystem: "bmap", // 坐标系使用bmap
            data: myData
          }
        ]
      };
      this.myChart.setOption(option);
    },
    // 点击方放大 缩小
    roamMap(val) {
      // console.log(val);

      this.btnClick = val;
      let currentZoom = this.myChart.getOption().bmap[0].zoom; // 当前的缩放比例

      let increaseAmplitude = 1.2; // 点击按钮每次 放大/缩小 比例
      if (val == 1) {
        increaseAmplitude = 0.8;
      }

      this.myChart.setOption({
        bmap: {
          zoom: currentZoom * increaseAmplitude
        }
      });
    }
  }
};
</script>
<style scoped>
.chart {
  margin: 0 auto;
  width: 800px;
  height: 500px;
  background: pink;
}
.active {
  width: px2rem(60);
  height: px2rem(98);
  line-height: px2rem(98);
  text-align: center;
  border-radius: px2rem(30);
  font-size: px2rem(50);
  background-color: #2eca9c;
  color: #fff;
}
::v-deep .anchorBL {
  display: none;
}
</style>

• 实现地图的总体效果图
  

我这是实现了简单的一个echarts + 百度地图 其实还有好多功能没加上去
有兴趣的朋友可以去 百度地图开放平台 和 echarts官网看一下API 上面介绍都挺全的

• 总结这次算是接触了一个新的领域吧 也学到很多 也很高兴能和一些志同道合的朋友学习 有什么不对的地放 也希望各位大佬能提出来 万分感谢
• 这一行业还有很多不懂的地方 我也会继续加油 争取更进一步