Vue加载Amd模块(echarts的省市json)

Vue不支持Amd多的暴露方式。会报各种not define的错误
解决方式
  1. 删掉Amd暴露的代码。使用vue的向外暴露的代码。
  2. 将需要暴露的代码块拿出来,在Vue组件中引用即可
这里以echarts的北京市json为例说明 json数据
  1. 打开beijing.js,内容如下所示
    在这里插入图片描述
  2. 其中已经标明数据,红框是将后面的json数据绘制成为echarts地图。并通过外层的代码块使用Amd规范向外暴露
  3. 将数据部分提取并保存在bj.json
    在这里插入图片描述
  4. 然后在组件中通过 import beijing from '../../assets/js/mapchart/bj.json'引入(这里采用了局部引入,考虑到不同的组件中使用的不同的json数据)
  5. 在中将引入的数据绘制为map,第一个参数同步绑定option.geo.map的值
    在这里插入图片描述
  6. log打印一下option.geo.map查看输出不为空,成功
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3是一种流行的JavaScript框架,Vite是一种新型的构建工具,在Vue3中使用Vite能够大幅度提高项目的启动速度和开发效率。而Echarts是一种常用的数据可视化工具,能够快速呈现数据信息。在Vue3项目中使用Echarts,并实现省市联动功能,可以使数据可视化更直观、易懂。 要实现Vue3和Echarts的联动,需要使用Vue3的组件化和生命周期钩子函数的特性,以及Echarts提供的地图和数据处理的API。例如,可以创建一个地图组件,接收父组件传来的数据,并在mounted生命周期钩子函数中使用Echarts的API,渲染出地图,并对地图添加相关数据和交互事件。然后,在父组件中调用地图组件,并在需要的时候传递数据,使地图组件显示对应的地区信息。 实现省市联动功能,则需要在地图组件中通过Echarts提供的API获取地图中每个区域的信息,例如名称、位置等,并在组件中实现地区选中事件。同时,还需要使用数据处理的API,将省市、地区等数据按照特定的格式存储并传递给地图组件,以实现多级联动。例如,当选中某个省份时,地图组件应该显示该省份所有市区的信息,方便用户选择。 总之,结合Vue3和Echarts的特性,实现省市联动功能应该是一项非常有趣和有价值的工作。它能够将数据可视化处理提升到一个新的水平,并提供更直观、易懂的数据信息展示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值