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 相关文章推荐
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
详解js中的原型,原型对象,原型链
Jul 16 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+DBM的同学录程序(4)
2006/10/09 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
Add a Table to a Word Document
2007/06/15 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Opencv求取连通区域重心实例
2020/06/04 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
新闻编辑求职信
2014/04/09 职场文书
员工趣味活动方案
2014/08/27 职场文书
整改报告怎么写
2014/11/06 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
MySQL Server 层四个日志
2022/03/31 MySQL
Python 文字识别
2022/05/11 Python