【Echarts】echarts地图展示、自定义点位、地图及点位的点击事件

项目中用到地图，之前看到ecarts的地图功能觉得合适，先看看效果图：

1、首先在阿里数据可视化平台下载需要地区的JSON文件：数据可视化
2、下载安装echarts、vue、axios

• 数据格式（必须）

_this.mapData.push({
  // value: ele,
  id: ele.id,
  name: ele.name,
  signboardName: ele.signboardName ?? ele.name,
  lng: ele.longitude,
  lat: ele.latitude,
  connectStatus: ele.connectStatus,
  dataStatus: ele.dataStatus
})

• 自定义点位

addImage(url, params, api, realData) {
   return {
      type: "image",
      style: {
        image: url,
        x: api.coord([
          realData[params.dataIndex].lng,
          realData[params.dataIndex].lat,
        ])[0],
        y: api.coord([
          realData[params.dataIndex].lng,
          realData[params.dataIndex].lat,
        ])[1],
        width: 20,
        height: 25,
      },
    };
  },

• 地图代码`

handler() {
   var that = this
   var container = document.getElementById("container");
   var myChart = this.echarts.init(container);
   
   myChart.showLoading();
   axios.get("/json/xuzhou.json").then((geoJson) => {
     // console.log(geoJson, "geoJson");
     myChart.hideLoading();
     this.echarts.registerMap("徐州", geoJson.data);
     var option = {
       tooltip: {
         trigger: 'item',
         formatter: function (params) {
           // console.log(params, 'tooltip')
             return params.data.signboardName 
         }
       },
       geo: {
         // center: [120.80942, 32.5143], // 整个地图的中心
         map: "徐州",
         roam: true, // 鼠标缩放
         itemStyle: {
           normal: {
             label: {
               show: true,
             },
             areaColor: "#05063C",
             borderWidth: 3, //设置外层边框
             borderColor: "#0F92CA",
             shadowColor: "#080A43",
             shadowBlur: 0,
           },
         },
         // 高亮状态
         emphasis: {
           focus: "self",
           itemStyle: {
             areaColor: "#05063C",
             borderWidth: 6, //设置外层边框
             borderColor: "#0F92CA",
             shadowColor: "#080A43",
             shadowBlur: 0,
           },
           label: {
             show: true,
             textStyle: {
               color: "#fff",
               fontSize: 18,
             },
           },
         },
         // 文字样式
         label: {
           normal: {
             show: true,
             textStyle: {
               color: "#0F92CA",
               fontSize: 18,
             },
           },
         },
       },
       series: [
         {
           type: "custom",
           coordinateSystem: "geo",
           renderItem: function (params, api) {
             // console.log(params, api, '油烟')
             //具体实现自定义油烟图标的方法
             if (
               that.mapData[params.dataIndex].connectStatus === 1 &&
               that.mapData[params.dataIndex].dataStatus === 1
             ) {
               return that.addImage(
                 one_alarm,
                 params,
                 api,
                 that.mapData
               );
             } else if (
               that.mapData[params.dataIndex].connectStatus === 1 &&
               that.mapData[params.dataIndex].dataStatus === 0
             ) {
               return that.addImage(
                 one_off,
                 params,
                 api,
                 that.mapData
               );
             } else {
               return that.addImage(
                 one_on,
                 params,
                 api,
                 that.mapData
               );
             }
           },
           zlevel: 1,
           data: that.mapData,
         },
       ],
     };
     option && myChart.setOption(option);
     //此处写点击事件内容
       myChart.on('click', function(params){
         // console.log(params, '图标点击');
         if(params.data) { // 图标
           that.companyShow = true
         } else { // 地图
         	that.areaShow = !that.areaShow
       });
   });
 },

每天进步一点点，加油ヾ(◍°∇°◍)ﾉﾞ