echarts百度地图在vue的应用

熊孩子依旧调皮
1,308 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

前言

上集咱们说到高德地图在vue的应用，发现高德地图有点复杂没有echart的百度地图使用起来比较简便，实际上同样功能高德地图开发了一天半时间，百度地图echarts只用了小半天时间（比半天还短），所以给大家分享一下百度地图的应用。上图：

image.png

绘制地图

  • 安装
  1. 使用npm命令进行安装，默认安装是最新版本如果想安装指定版本记得加上版本号。

npm install echarts --save

  1. 引入echarts和中国地图的js包
import echarts from "echarts";
import "echarts/map/js/china";
  1. 初始化 创建一个装地图的容器并附上ID
<div class="mappage_con" id="mapCon"></div>

我们在DOM加载完成后进行对echarts的初始化，要在mouted中进行，如果放在created中会找不到元素的ID

echarts.init(document.getElementById("mapCon"));
  1. 地图配置
  • 点击弹窗设置 我做的是鼠标放上去可以变色，点击某个区域进行弹窗展示详细信息；所以我们要在tooltip中设置具体参数为：trigger：提取默认值，triggerOn：事件名称，enterable：鼠标是否可以停留在弹窗上，formatter为设置弹窗内的具体信息，其中回调参数是当前鼠标放在某个区域的信息，可以在内写HTML
var options = {
tooltip: {
  trigger: "item",
  triggerOn: "click",
  enterable:true,
  backgroundColor: 'transparent',
  formatter: function (params) {
    return ''<div onclick=goDetails('+JSON.stringify({name})+')>详情</div>'+
      '</div>';
  },
},
}

注意！如果在formatter中有点击事件的话，需要把该事件绑定到Window上否则获取不到该方法，所以我们需要在created时把该事件方法绑定到window

window.goDetails = this.goDetails;
  • 模块数据展示和颜色设置 其中：type:设置成map地图模式，zoom：同比放大或者缩小多少倍，roam：是否开始树图，label：地区名称的一些设置比如北京市等等，areaStyle:区域填充样式，data:数据
series: [
  {
    name: "信息",
    type: "map",
    zoom:1.2,
    mapType: "china",
    roam: false,
    label: {
      show: true,
      color: "rgb(249, 249, 249)",
    },
    data: [...this.list],
    itemStyle: {
      normal: {
        borderWidth: 1, //边际线大小
        borderColor: "#53a0ff3b", //边界线颜色
        areaColor: "transparent", //默认区域颜色
      },
      emphasis: {
        show: true,
        areaColor: "#2D59E6", //鼠标滑过区域颜色
        label: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
    },
  },
],

注意！itemStyle为每个区域模块的设置其中包括normal，emphasis

  1. 为整个地图的设置比如边界线、颜色、默认区域颜色
  2. emphasis为鼠标滑倒某个区域的设置，包括划过的区域颜色、label的字体颜色是否显示等
  • 根据数据大小不同，对应的颜色也不同展示 在options内设置visualMap方法，其中：type设置为piecewise这样看着舒服，具体请看文档，pieces为区域范围设置，最大最小值，label名称的显示和对应的区块颜色展示
visualMap: {
  type: "piecewise",
  pieces: [
    { min: 1001, max:9999 , label: "1001-9999", color: "#ee7263" },
    { min: 1, max: 1000, label: "1-1000", color: "#f5bba7" },
  ],
},

配置添加到echarts

现在咱们的配置写好了，需要把配置放到echarts上这样才能生效

mychinaChart.setOption(options)

参考资料

怎么样？就是这么简单，就是这么顺畅！

echarts配置项

echarts图例

avatar
文章
阅读
粉丝