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
发表评论 (审核通过后显示评论):