vue中使用echarts地图从世界地图下钻到区县

安装Echarts依赖 npm install echarts --save version 4.7.0 element-ui的相关使用方法就不做介绍了。 全局引入Echarts和element-ui // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import echarts from 'echarts' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.prototype.$echarts = echarts Vue.use(ElementUI); Vue.config.productionTip = false 重点来了,这里为了防止项目打包后找不到地图资源用了地图的json文件。 在static中新建mapData来存放地图的json文件(这里我导入了echarts中所有的地图json文件和重庆江北区的json文件) 获取echarts中没有的地图json文件(https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ)这里以成都市为例 image.png image.png 编写页面 大功告成 image.png 项目地址 https://github.com/18662582256/echarts_map

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):