vue项目中使用echarts实现疫情地图
一、搭建项目
注：如果使用的是vue-cli的老版本(4.20以下的)建议使用以下命令升级vue-cli版本
npm uninstall vue-cli -g
npm uninstall @vue-cli -g
1、选择路径创建项目
vue create vue-mychart
随后出现一些配置选项，选择Manually select features进行配置
2、选择预配置项
选择Router、Vuex、CSS Pre-processors、Linter / Formatter
3、是否使用路由的history模式
可以选也可以不选，之后可以改的，我选择不选
4、选择一个预处理语言
选with node-sass就行
5、选择ESLint自动化代码格式化检测
从上到下分别是：只预防、airbnb配置、标注配置、最高配置
作为学习选择只预防就可以了选择回车下一步
6、选择代码检测时机，选择保存时检测
下一步就好了
7、将配置文件放到pakage.json中还是单独文件中
选择pakage.json即可
8、是否保存选择的配置
这里不保存选n
安装成功后显示如下
随后进入文件夹
运行项目就可以了
npm run serve
yarn serve
二、使用echarts实现疫情地图
echarts文档
1、安装echarts默认是最新版本，我试了好多版本怎么都不行，这里我查了网上资料使用 ^4.7.0 的版本就可以显示
终端键入
npm install echarts --save
如果失败，并看到
则键入来修复
npm audit fix
成功后可以在package.json内看到echarts对应的版本号
2、封装自定义组件与配置路由
- 在
router文件下的index.js里配置自定义组件chart.vue对应的路由
- 在
App.vue中配置路由跳转
- 在
view文件夹下新建一个自定义组件chart.vue MapChart.vue
3、在chart.vue中进行使用echarts
- 引入echarts
import echarts from 'echarts' //引入echarts
- 准备一个DOM容器
- 使用钩子函数，挂载完成之后执行
init
mounted(){ //钩子函数，生命周期为挂载完成后，Dom操作一般是在mounted钩子函数中进行。
this.init(); //挂载完成，执行init
}
- 编写
init方法
//基于准备好的dom，初始化echarts实例 var myEchart = echarts.init(document.getElementById('mychart1')); // 指定图表的配置项和数据var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } // 使用刚指定的配置项和数据显示图表。 myecharts.setOption(option);
chart完整代码如下
4、显示效果
三、第二种地图显示方法
1、安装jsonp
npm install jsonp
2、封装自定义组件与配置路由
和上一种方法类似，不赘述
3、新建chinaMap.vue中进行使用echarts
附上源代码
效果如下：