Detaillierte Erläuterung der Methode zur eleganten Kapselung der Echarts-Karte im Vue2-Projekt-View.js-php.cn

vue2Wie kapselt man die Echarts-Karte elegant in das Projekt ein? Der folgende Artikel stellt Ihnen die elegantere Möglichkeit vor, die Echarts-Karte in das vue2-Projekt einzubinden. Ich hoffe, er wird Ihnen hilfreich sein!

Detaillierte Erläuterung der Methode zur eleganten Kapselung der Echarts-Karte im Vue2-Projekt

Ich habe bereits geschrieben Eine elegantere Möglichkeit, E-Charts im Vue-Projekt zu kapseln In der Großbildvisualisierung wird neben der sehr häufigen Verwendung von Datendiagrammen auch die Anzeige von Provinz- und Stadtkartenbereichen sehr häufig verwendet . Dies ist ein Begleitartikel. [Verwandte Empfehlungen: vuejs-Video-Tutorial]

Bei der Auswahl eines Gebiets auf einer regionalen Karte ist ein Popup-Fenster erforderlich, um Daten anzuzeigen. Es gibt verschiedene Stile, verschiedene Anordnungen von Daten, Grafik- und Text-Mashups, Videos. .hier wird neben der Kapselung des regionalen Kartenmoduls auch die Implementierung benutzerdefinierter Popup-Fenster und die Möglichkeit zum dynamischen Laden von Schnittstellendaten in benutzerdefinierten Popup-Fenstern vorgestellt

Was Sie lernen können

1 Kapselung des Kartenmoduls, wiederverwendbar
2. Benutzerdefinierte Popup-Fenster für die Echarts-Karte (Anzeige benutzerdefinierter Stile, benutzerdefinierter Daten und benutzerdefinierter Bilder) Für andere Diagramme können Sie sich auf die benutzerdefinierten Popup-Fenster beziehen.
3. Das benutzerdefinierte Popup-Fenster von echarts zeigt dynamisch Schnittstellendaten an.
4 Basierend auf dem Schwesterartikel ist dieses Kartenmodul auch adaptiv. 5. Basierend auf vue2 cli3 , echarts 5

Rendering

Lassen Sie uns zunächst ein Rendering durchführen, um den erzielten Effekt zu erklären. vue2 、vue cli3、echarts 5

效果图

先上个效果图吧，说明下实现的效果。

1、广州区域地图
2、自定义弹窗，显示选中地区的名称、区号，弹窗加了个小图片
3、基本上图片、视频什么的，都可以在自定义弹窗上显示，这里只展示下自定义弹窗加图片的方式，视频同理的，不介绍了，有兴趣自己随便试试就好
4、弹窗数据是从模拟接口取的

Detaillierte Erläuterung der Methode zur eleganten Kapselung der Echarts-Karte im Vue2-Projekt

注意

1、vue中echarts `5.x`以下版本和`5.x`以上版本引入的区别

`5.x`以下版本

import echarts from &#39;echarts&#39;

Nach dem Login kopieren

`5.x`以上版本

import * as echarts from &#39;echarts&#39;

Nach dem Login kopieren

2、记得在`vue.config.js`中开启运行时编译功能

runtimeCompiler: true

Nach dem Login kopieren

实现

数据准备

|-- public
	|-- data
		|-- 4401.json
		|-- mapdata.json
	|-- images
		|-- map-ic.png

Nach dem Login kopieren

1、4401.json是广州区域的geojson数据，用来给echarts显示广州的区域地图
2、mapdata.json是模拟接口请求的假数据，自己随便自定义了，在获取数据后，看情况处理下传到封装好的echarts地图模块就行，这里模拟接口请求的知识可参考这里： https://juejin.cn/post/6995147964427534373/
3、map-ic.png地图自定义弹窗用到的图片

echarts地图模块封装

|-- src
    |-- components
        |-- chart
            |-- options    // 存放各种图表的option
                |-- map    // 地图option
                    |-- index.js

Nach dem Login kopieren

具体代码如下：

import * as echarts from &#39;echarts&#39;

const getSimpleMap = (jsonMap, data, config) => {
  if (!echarts.getMap(jsonMap.mark)) {
    echarts.registerMap(jsonMap.mark, jsonMap.json)
  }
  const defaultConfig = {
    tooltip: {
      // 窗口外框
      trigger: 'item',
      padding: 0,
      borderWidth: 0,
      borderColor: '#FFFFFF',
      backgroundColor: '#FFFFFF',
      formatter: (params) => {
        const { data } = params
        const str = `
                    
                        ${data.name}
                    
                    
                        
                            
                                区号：
                                ${data.hoverObj == null ? '' : data.hoverObj.adcode}
                            
                        
                    
                `
        return str
      }
    },
    geo: {
      map: jsonMap.mark,
      type: 'map',
      layoutCenter: ['50%', '50%'],
      layoutSize: '150%',
      zoom: 0.65,
      roam: false,
      itemStyle: {
        normal: {
          areaColor: 'rgba(201, 229, 255, 1)',
          shadowColor: 'rgba(142, 201, 255, 1)',
          shadowOffsetX: -5,
          shadowOffsetY: 12
        }
      }
    },
    series: [
      {
        type: 'map',
        map: jsonMap.mark, // 自定义扩展图表类型
        zoom: 0.65, // 缩放
        animationDuration: 1200,
        itemStyle: {
          // 地图样式
          normal: {
            borderColor: '#FFFFFF',
            borderWidth: 3,
            areaColor: 'rgba(201, 229, 255, 1)'
          }
        },
        label: {
          show: true,
          color: '#666666',
          fontSize: 12,
          fontWeight: 400
        },
        emphasis: {
          // 鼠标移入动态的时候显示的默认样式
          label: {
            show: true,
            color: '#FFFFFF',
            fontSize: 15,
            fontWeight: 600
          },
          itemStyle: {
            areaColor: 'rgba(102, 182, 255, 1)',
            borderColor: '#FFFFFF',
            borderWidth: 2
          }
        },
        layoutCenter: ['50%', '50%'],
        layoutSize: '150%',
        data: data
      }
    ]
  }
  const opt = Object.assign({}, defaultConfig, config)
  const { legend, tooltip, series, geo, grid } = opt
  const chartOpt = {
    grid,
    legend,
    tooltip,
    geo,
    series
  }
  return chartOpt
}

export default {
  getSimpleMap
}

Nach dem Login kopieren

自定义弹窗主要是在tooltip的formatter里面实现，自定义好html弹窗，把params里要显示的数据显示到对应的地方就OK了。

个人喜欢直接纯html实现好设计给的弹窗样式，然后直接复制到formatter里面。每次遇到不同的设计，就修改下formatter里面的html和匹配下要显示的数据就行了。这里可以进一步封装的，有兴趣的可以试试。

页面调用

<chart-view
      class="map-view"
      :chart-option="mapOpt"
      height="100%"
      @click="handleMapClick" />

Nach dem Login kopieren

1、 :chart-option="mapOpt"这个是给封装的echarts地图模块的传参，接口数据要经过处理，具体看下一节
2、@click="handleMapClick"这里是点击地图时，对应区域的数据，用于有下一步的操作，例如地图下钻

接口数据处理

initMap(url) {
    mapRequest(url).then((res) => {
        const mapData = res.data
        const jsonMap = { mark: this.mapName, json: mapData }

        const data = mapData.features.map((item) => {
          const { name, adcode } = item.properties

          let hoverObj = {}

          const objIndex = findElem(this.mapPopData, &#39;adcode&#39;, adcode)
          if (objIndex !== -1) {
            hoverObj = this.mapPopData[objIndex]
          } else {
            hoverObj = null
          }
          return {
            name,
            hoverObj: hoverObj
          }
        })
        this.mapOpt = this.$eChartFn.getSimpleMap(jsonMap, data)
    }).catch((err) => {
        console.log(err, &#39;加载地图失败&#39;)
    })
}

Nach dem Login kopieren

这里对地图geojson数据和接口返回数据进行匹配处理，达到弹窗数据是对应地区数据的效果。

地图geojson数据是必有adcode字段的，所以接口数据mapPopData最好也是加上此字段，用来匹配。上面代码里的hoverObj是匹配好的每个区域的数据，最终形成数组data，通过以下代码给封装的echarts模块传参

this.mapOpt = this.$eChartFn.getSimpleMap(jsonMap, data)

Nach dem Login kopieren

具体代码可以参考echartMapTest文件夹里面的index.js文件

代码总览

涉及的文件如下（具体参考代码

🎜1. Benutzerdefiniertes Popup-Fenster mit dem Namen und der Ortsvorwahl des ausgewählten Gebiets🎜🎜3. usw. können im Popup-Fenster angepasst werden. Hier zeigen wir nur, wie das Popup-Fenster angepasst und Bilder hinzugefügt werden. Daher werde ich es nicht vorstellen Interessiert, probieren Sie es einfach selbst aus🎜🎜4. Die Popup-Fensterdaten werden von der Simulationsoberfläche übernommen🎜🎜 Detaillierte Erläuterung der Methode zur eleganten Kapselung der Echarts-Karte im Vue2-Projekt

Detaillierte Erläuterung der Methode zur eleganten Kapselung der Echarts-Karte im Vue2-Projekt

🎜< h2 data-id="heading-2">Hinweis 🎜

1. Versionen von Echarts `5.x` und niedriger in Vue und `5.x`In den obigen Versionen eingeführte Unterschiede

`5.x`Versionen niedriger

|-- public
	|-- data
		|-- 4401.json
		|-- mapdata.json
	|-- images
		|-- map-ic.png
|-- src
	|-- api
		|-- map.js    // 获取地图geojson数据、地图弹窗接口模拟数据
    |-- components
        |-- chart
            |-- index.vue    // 图表单文件组件，供界面调用
            |-- index.js    // 实现自动化导入options里的图表option
            |-- options    // 存放各种图表的option
                |-- map    // 地图option
                    |-- index.js
    |-- views
        |-- echartMapTest    // 实例所在
            |-- index.vue
            |-- index.scss
            |-- index.js
	|-- utils
		|---utils.js
|-- main.js    // 全局引入echarts图表

Nach dem Login kopieren

`5.x` oder höher

rrreee

2. Denken Sie daran, es in der `vue.config.js` Laufzeitkompilierungsfunktion

rrreee

Implementierung zu aktivieren 🎜

Datenvorbereitung

rrreee🎜🎜1, 4401 .json sind die geojson-Daten der Region Guangzhou, Wird verwendet, um die regionale Karte von Guangzhou in echarts🎜🎜2, mapdata.json anzuzeigen. Es handelt sich um gefälschte Daten, die von der simulierten Schnittstelle angefordert werden. Sie können sie nach Belieben anpassen Informationen zu simulierten Schnittstellenanforderungen finden Sie hier: https://juejin.cn /post/6995147964427534373/🎜🎜3 -ic.pngBilder, die im benutzerdefinierten Karten-Popup-Fenster verwendet werden🎜

Echarts-Kartenmodul-Kapselung

rrreee🎜Der spezifische Code ist wie folgt folgt: 🎜rrreee🎜Das benutzerdefinierte Popup-Fenster wird hauptsächlich im formatter von tooltip implementiert, und die Anpassung erfolgt im html</ code>Popup-Fenster , zeigen Sie die anzuzeigenden Daten in <code>params an der entsprechenden Stelle an und es ist in Ordnung. 🎜🎜Persönlich möchte ich den entworfenen Popup-Fensterstil direkt mit reinem html implementieren und ihn dann direkt in formatter kopieren. Jedes Mal, wenn Sie auf ein anderes Design stoßen, ändern Sie einfach den html im formatter und passen Sie die anzuzeigenden Daten an. Es kann hier weiter gekapselt werden. Wenn Sie interessiert sind, können Sie es versuchen. 🎜

Seitenaufruf

rrreee🎜🎜1 :chart-option="mapOpt"Dies dient der Kapselung von

echarts code>Die vom Kartenmodul übergebenen Parameter, die Schnittstellendaten müssen verarbeitet werden, Einzelheiten finden Sie im nächsten Abschnitt🎜🎜2 @click="handleMapClick"Hier sind die Daten des entsprechenden Bereichs Wenn auf die Karte geklickt wird, wird sie für den nächsten Vorgang verwendet, z. B. einen Karten-Drilldown.🎜Schnittstellendatenverarbeitung
rrreee🎜Hier ist der Karten-geojson Daten- und Schnittstellenrückgabe Die Daten werden abgeglichen und verarbeitet, um den Effekt zu erzielen, dass die Popup-Daten die Daten der entsprechenden Region sind. 🎜🎜Die Kartendaten geojson müssen das Feld adcode haben, daher ist es am besten, dieses Feld zum Abgleich zu den Schnittstellendaten mapPopData hinzuzufügen.
Das hoverObj im obigen Code sind die übereinstimmenden Daten jedes Bereichs und bilden schließlich ein Array data, das an das gekapselte echarts-Modul übergeben wird durch den folgenden Code 🎜rrreee🎜Den spezifischen Code finden Sie in der Datei index.js im Ordner echartMapTest🎜Codeübersicht🎜🎜Beteiligt Die Datei lautet wie folgt (Einzelheiten finden Sie unter code): 🎜|-- public
	|-- data
		|-- 4401.json
		|-- mapdata.json
	|-- images
		|-- map-ic.png
|-- src
	|-- api
		|-- map.js    // 获取地图geojson数据、地图弹窗接口模拟数据
    |-- components
        |-- chart
            |-- index.vue    // 图表单文件组件，供界面调用
            |-- index.js    // 实现自动化导入options里的图表option
            |-- options    // 存放各种图表的option
                |-- map    // 地图option
                    |-- index.js
    |-- views
        |-- echartMapTest    // 实例所在
            |-- index.vue
            |-- index.scss
            |-- index.js
	|-- utils
		|---utils.js
|-- main.js    // 全局引入echarts图表
Nach dem Login kopieren
Nach dem Login kopieren
代码
按代码总览的目录去代码里找着看就行了。
https://github.com/liyoro/vue-skill
总结
以上，就是对echarts地图模块的封装，还有自定义弹窗的实现。使用和复用都比较方便了。
最近才发现 www.makeapie.com 停服了，挺好用的东西来的，感谢这么多年的奉献。
有需求的可转移到 PPChart，算是一个替代品了
（学习视频分享：vuejs教程、web前端）
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methode zur eleganten Kapselung der Echarts-Karte im Vue2-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!