vue + echart +map 地图实现省下钻到市

最新推荐文章于 2025-03-20 16:02:53 发布

来宝卉

最新推荐文章于 2025-03-20 16:02:53 发布

阅读量5.5k

点赞数 1

分类专栏： echart + vue

本文链接：https://blog.youkuaiyun.com/qq_38021296/article/details/84379228

版权

第一步：安装依赖和全局注册echart
安装步骤请看我另一篇文章vue + echart +map实现中国，省，市地图
将市的json 文件放在全局static 文件夹下，并引入

import baotoushi from '../../../static/json/huhehaoteshi.json'
import huhehaoteshi from '../../../static/json/huhehaoteshi.json'
import baotoushi from '../../../static/json/baotoushi.json'
import wuhaishi from '../../../static/json/wuhaishi.json'
。。。。。引入全部

第二步: methods里定义方法，先初始化地图实例（自己查文档加地图底色）

getDownMap(){
   
	let that = this;
	let chart = that.$echarts.init(document.getElementById("mapChart"));
	let name = "内蒙古";
      let option = {
   
        geo: {
   
          map: name,
          label: {
   
            normal: {
   
                show: true,
                textStyle: {
   
                    color: '#fff',
                    fontSize: 20
                }
            },
            emphasis: {
   
                textStyle: {
   
                    color: '#fff'
                }
            }