Vue ECharts世界地图数据可视化

Posted 2022-05-16 妮可是条狗

资料准备

世界地图相关文件，world.js和world.json，点击打包下载，密码：2555

引入世界地图

将world.js放到public目录下，在父组件页面中引入：import "../../../public/js/world.js"

使用world.json

官网提供的world.json文件如下，其中namemap不需要修改，dataArr为通过接口获取后台传递的数据

新建地图子组件worldChart.vue

父组件调用 index.vue

<template>
  <world-chart :id="worldChart"  ref="worldChart" :chartData="worldChartData"/>
</template>
<script>
  import worldChart from "./components/worldChart.vue"; //引入地图组件
  import "../../../public/js/worjs
  export default 
    components:  worldChart ,
    data() 
      return 
         worldChartData: 
           namemap:, // 自定义地区的名称映射,从官方world.json中获取
           dataArr: [], // 地图系列中的数据内容数组,从后台返回数据
         ,
      
    ,
    mounted () 
      this.getNamemap();
      this.getDataArr();
    ,
    methods: 
      // 获取地区的名称映射
      getNamemap () 
        axios.get(src/api/world.json).then(function (res) 
          this.worldChartData.namemap = res.data.namemap
        )
      ,
      // 获取地图数据数组
      getDataArr（）
    axios.get(url).then(function (res) 
          this.worldChartData.dataArr= res.data.namemap
        )
      
    
  
</script>

总结：

1.父组件获取数据：地区的名称映射namemap可从官网提供的world.json中取出，地图数据内容数组dataArr后台返回，传递到地图子组件；
2.子组件通过props接收，将两个参数传递到drawChart方法中，注意监听数据变化。