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 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
详解用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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
详解Python中的多线程编程
2015/04/09 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
快速查询Python文档方法分享
2017/12/27 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python3 反射的四种基本方法解析
2019/08/26 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python中的对数log函数表示及用法
2020/12/09 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
文明家庭先进事迹材
2014/01/27 职场文书
12月红领巾广播稿
2014/02/13 职场文书
创先争优公开承诺书
2014/08/30 职场文书
个人政治思想总结
2015/03/05 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python