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 控制弹出窗口
Apr 10 Javascript
jQuery 研究心得 取得属性的值
Nov 30 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
JS验证身份证有效性示例
2013/10/11 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
Linux的文件类型
2012/03/07 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
《问银河》教学反思
2014/02/19 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
银行求职自荐信
2014/06/30 职场文书
个人年底工作总结
2015/03/10 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
Python OpenGL基本配置方式
2022/05/20 Python