vue cli3.0结合echarts3.0与地图的使用方法示例


Posted in Javascript onMarch 26, 2019

前言

echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表。而vue更合适操纵数据。

最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客。下面是结合地图的一个小的echarts demo,我在使用npm的时候对比了echarts和vue-echarts两个依赖,最后决定使用echarts依赖包,因为它更接近原生,使用现实更小,如果对vue生命周期比较了解,那就更容易操作。

下面讲一下做出这样一个echarts图。话不多说了,来一起看看详细的介绍吧

一 基础的echarts图表制作

1.首先在vue项目中引入echarts并全局配置

npm install echarts --save

在main.js中引入并挂在到vue的prototype上

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

2.创建一个装载echarts图表的盒子

<div id="chart1"></div>

差不多就是这样,设置一个id即可。

3.按需引入需要的echarts组件

vue cli3.0结合echarts3.0与地图的使用方法示例

4.在data里面配置好echarts的配置项和数据

vue cli3.0结合echarts3.0与地图的使用方法示例

5.在mounted生命周期中初始化echarts图表,在对应的方法中获取echarts节点并渲染。

首先在mounted中调用初始化函数

this.drawLine();

然后获取echarts节点

this.chart1 = this.$echarts.init(document.getElementById("chart1"));
this.chart1.setOption(this.items2);

6.在屏幕大小发生变化时,我们重新渲染图表

这一步很简单只需调用resize方法即可

window.onresize = () => {
this.chart1.resize();
};

这样一来我们就完成了这样一个简单的图表,想做出更炫酷的图表请研读echarts文档,接下来我们看看怎么使用echarts的地图功能

二 echarts地图的使用

1.echarts地图功能也不复杂,只需要引入对应省份国家的地图js库即可

vue cli3.0结合echarts3.0与地图的使用方法示例

然后在想使用的地方引入

import "echarts/map/js/province/beijing.js";

2.配置地图配置项

vue cli3.0结合echarts3.0与地图的使用方法示例

3.修改地图默认数据

这样配置之后会有一些问题,地图一些名称会有显示的问题,就像这样

vue cli3.0结合echarts3.0与地图的使用方法示例

文字显示的位置不太满意,我们调整一下文字显示的位置。打开地图js文件,修改经纬度,知道自己满意。

vue cli3.0结合echarts3.0与地图的使用方法示例

这样就可以操作我们的地图了,是不是很简单?!喜欢就加个关注,我会定期更新一些使用的小文章

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
js实现开关灯效果
Mar 30 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
详解用JS添加和删除class类名
Mar 25 #Javascript
详解javascript设计模式三:代理模式
Mar 25 #Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 #Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 #Javascript
9102了,你还不会移动端真机调试吗
Mar 25 #Javascript
详解原生JS回到顶部
Mar 25 #Javascript
javascript验证form表单数据的案例详解
Mar 25 #Javascript
You might like
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Vue中使用vux配置代码详解
2018/09/16 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python读写文件操作示例程序
2013/12/02 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
python opencv之分水岭算法示例
2018/02/24 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
国贸专业个人求职信范文
2014/01/08 职场文书
教师专业自荐书范文
2014/02/10 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python