Vue使用Echarts展示地图

Posted 2023-02-22 CaoPengCheng&

Vue使用Echarts展示地图

• 一，获取地图json
• 二，Vue实现展示
• • 2.1 Vue环境
  • 2.2 main.js引入Echarts
  • 2.3 展示

一，获取地图json

阿里云数据可视化平台获取
阿里云DataV地图选择器

二，Vue实现展示

2.1 Vue环境

ES6、vue、vuex、vue-router、vue-cli、axios、element-ui
Node >= 10

2.2 main.js引入Echarts

// 引入Echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.3 展示

<template>
  <div id="main" style="width: 100%;height:800px;" />
</template>
<script>

import echarts from 'echarts'
import JSON from '@/map/china.json'

export default 
  mounted() 
    this.leftCenterMap()
  ,
  methods: 
    leftCenterMap() 
      var myChart = echarts.init(document.getElementById('main')) // 拿到一个实例
      echarts.registerMap('中国', JSON, )// 引入地图文件
      console.log(JSON)
      var option = 
        series: [
          
            type: 'map',
            mapType: '中国'// 地图名称
          ]
      
      myChart.setOption(option)
    
  

</script>