Vue ECharts世界地图数据可视化 _可视化

人生难得几回搏，此时不搏待何时。这篇文章主要讲述Vue ECharts世界地图数据可视化相关的知识，希望能为你提供帮助。
资料准备
世界地图相关文件，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="https://www.songbingjia.com/android/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>

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