vue3中使用echarts展示地图
<template><div id="myecharts" ref="map"></div></template>
·
自学过程用来记录
代码可以直接使用,新建一个组件就可以了,mapData数据来源于阿里的平台
复制json Api在浏览器打开,会出现如下内容
新建mapData.js文件,文件内容如下:
只要在前面加上export let mapData,组件内部如下,采用的是安徽省地图
<template>
<div id="myecharts" ref="map"></div>
</template>
<script>
import * as echarts from 'echarts';
import {mapData} from "../assets/static/mapData"
export default {
name:'Middle',
mounted(){
let myChart=echarts.init(this.$refs.map);
echarts.registerMap('anhui',mapData);
let option={
geo:{
type:'map',
map:'anhui',
//roam:true,
//zoom:10 ,//平移
label:{
show:true
}
}
};
myChart.setOption(option);
}
}
</script>
<style>
#myecharts{
width: 600px;
height: 500px;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)