保姆级教程|ECharts图表插件一文搞懂!
黑马程序员视频库
播妞QQ号:3077485083
传智播客旗下互联网资讯、学习资源免费分享平台
在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一点的图表怎么办呢?
不要慌,今天就给大家推荐一个前端大佬们用的非常火的图表插件——ECharts。
ECharts特性简介
ECharts是一个使用 JavaScript 实现的开源可视化库 ,啥叫开源呢,通俗点说,就是免费!不要钱!小伙伴们可以大胆放心的使用。可视化工具呢,就是将一系列的数据,转化成非常直观的图表,来供大家查看。
ECharts可谓是制作图表的良心之选,并且可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)。
所以,基本完全不用担心兼容性的问题,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
具体的还有的优点,我就不一一介绍了,需要用到更多功能的小伙伴呢,可以去ECharts官网查找更多的特性。
ECharts的下载
在使用ECharts之前,我们需要先去官网下载最新版本的ECharts的依赖包。在这,我推荐大家下载源代码,因为你源代码里面包含了所有图表组件以及常见的警告和错误。
如果你觉得源代码文件太大,而且项目中用到的图表功能很简单的话呢,那就使用精简版的好啦。
ECharts在普通项目中的使用
下面重点来啦!
大家准备好编译器哈~
准备和小编一起完成图表代码的实现。
首先,给大家讲一下ECharts图表在普通项目中的使用,后面还会讲到如何在vue项目里面使用,其他的开源框架里面如何使用我就不一一讲解了哈。
第一步
老规矩,首先将下载好的ECharts.js放在项目的js文件夹下面,之后,在需要用到的页面,引入<script src="ECharts.js"></script>,然后就可以开始写代码啦~
第二步
准备好一个dom元素,当然,需要给该dom元素一个id,方便我们去找到它,而且,还要给这个元素一个宽高,作为表格的视口,至于宽高给多少呢。各位大佬们高兴就好。<div id="main" style="width: 600px;height:400px;"></div>
第三步
开始写js代码啦,js代码有三个步骤:
FIRST
初始化ECharts实例:
var myChart = ECharts.init(document.getElementById('main'));
SECOND
指定图表的配置项和数据:
var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};
THIRD
使用刚指定的配置项和数据显示图表:
myChart.setOption(option);
这样子就OK啦,在浏览器打开你的代码吧,我们就得到了一个带动画效果的柱状图。
当然,不只是只有柱状图,还有各种其他的图表,怎么使用呢,首先点击实例,我们就来到了这个页面。
看上哪个图表了吗?不要犹豫啦,点击进去,我们就来到了如下页面。
然后复制左边的option代码,替换掉之前的第二步里面的option就可以,第一步和第三步是通用的,不需要修改。
图表里面的数据也是可以自定义的,比如想渲染通过ajax请求过来的数据的话,直接在ajax的回调函数里面直接给option赋值或者修改就可以啦。
那么,关于ECharts图表在普通项目中的使用就讲到这里啦。下面就给大家演示一下,如何在vue-cli 3.0里面的应用。
ECharts在vue-cli 3.3.0中的使用
ECharts不止是在vue-cli 3.3.0项目中可以使用,在其他版本的vue里面同样可以使用,因为vue-cli已经更新到了3.3.0。所以我们今天用这个版本作为例子来给大家演示。
第一步
第一步肯定是要先搭建vue-cli的项目。首先你需要有node的运行环境,这里我就默认大家都有啦。
首先安装vue-cli的全局环境npm install -g @vue/cli,装好之后,尝输入命令vue --version,如果出现了3.3.0字样,就说明安装成功啦。如果报错vue不是内部命令的话呢,就是安装失败了。那就有可能是你没有装node环境,或者node版本过低哦。vue-cli需要 node 8.9 或更高版本 (推荐 8.11.0+)。这时候你就需要装一个更高版本的node。
vue-cli环境搭建好之后,就开始创建vue的项目,也很简单。新建一个文件夹,然后输入指令vue create hello-world,就可以创建好一个vue的初始化项目。项目初始化之后,安装ECharts依赖包npm install ECharts -S,就可以开始写代码啦。
第二步
在main.js里面导入ECharts依赖包,再将ECharts实例化函数设为vue的原型函数,便于全局访问,代码如下图:
第三步
然后在HelloWorld.vue的template里面添加标签<div id="main" style="width: 600px;height:400px;"></div>;
script里面代码如下:
当然也有别的不同的写法,但是我觉得,这是我研究了很久出来的一套比较合理的写法,数据option放在data里面,初始化图表的drawCharts方法放在methods里面。
然后,方法为什么要在mounted生命周期函数里面调用呢?直接在methods里面调用不行吗?是不行的,因为我们在初始化的时候操作了dom元素,而mounted声明周期函数是在页面中的dom元素加载完毕之后才执行的而函数。所以在mounted里面调用drawCharts方法就不会出现找不到dom元素的情况。
vue里面是拒绝操作dom元素的,但是这个插件没有办法,必须选中dom元素初始化才可以,所以这里是一点小瑕疵,希望ECharts团队可以更加的优化一下。最后,大家npm run serve一哈。是不是有图表出来啦!
这篇文章主要是针对图表插件ECharts写的一个解析,大部分的东西,在ECharts官方文档里面都有,但是官方文档上面有的坑它并没有说出来。
我把在用这个插件时遇到的坑,还有自己对这个插件的一点点理解毫无保留的献给大家,希望大家在要用到ECharts这个插件的时候,能耐心的看完,相信一定会对大家有所帮助的!
前沿资讯/干货资料/免费课程
尽在黑马程序员视频
更多问题扫码咨询
????????????
END
- 推荐阅读 -
你的GitHub代码已打包运往北极,传给1000年后人类!网友:我的Bug还没修复...
2020-07-30
200行代码,10大知识点,3天做游戏!让你“爽爽爽”的学习利器!
2020-07-28
扒一扒国内外最火开发语言“上位”史!升职加薪很靠谱!
2020-07-23
跳槽首选,平均薪资2w+!现在入门快人一步
2020-07-21
我就知道你“在看”
保姆级教程|ECharts图表插件一文搞懂!相关推荐
- uniapp - 超详细实现播放 svg / svga 格式动画组件插件,用于直播间赠送礼物特效动画或项目动画特效较多的应用(新手小白保姆级教程,提供插件+详细运行示例+使用文档+注意事项+格式说明)
前言 网上关于 uniapp 播放 svg / svga 格式动画的教程很乱,基本上全是 BUG 和各种不兼容,很难复制过来自己用. 本文实现了 在 uniapp 项目中(完美兼容 H5 / App ...
- SpringBoot 配置 generator代码生成+knife4j接口文档(2种模板设置、逻辑删除、字段填充 含代码粘贴可用)保姆级教程(注意事项+建表SQL+代码生成类封装+测试类)
保姆级教程,逻辑删除及字段自动填充设置,特别要说明的是本次用的是MySQL数据库,如果使用Oracle数据库是,数据库配置需要改变,数据库表一定要大写,否则无法生成代码. 数据库表 CREATE TA ...
- FastText词向量训练、使用及可视化操作【保姆级教程(包含藏文处理方法)】
目录 一.前言 二.FastText词向量训练 2.1 数据输入格式 2.2词向量训练 三.词向量使用 一.前言 本文是word2vec词向量篇的姊妹篇.fasttext是静态词向量构建方法的一种,本 ...
- Word2Vec词向量训练、使用及可视化操作【保姆级教程(包含藏文处理方法)】
目录 一.前言 二.Word2Vec词向量训练 2.1 数据输入格式 2.2词向量训练 三.词向量使用 四.词向量可视化 一.前言 word2vec是静态词向量构建方法的一种,本文将介绍word2ve ...
- 从购买服务器到网站搭建成功保姆级教程~超详细
??从购买服务器到网站搭建成功保姆级教程~真的超详细,各位看官细品 ??前言 ??预备知识 ??什么是云服务器? ??什么是域名? ??什么是SSL证书? ??服务器选配 ??阿里云[官网链接](ht ...
- 图片适应窗口_毕业论文排版保姆级教程——图片和公式排版
[小技巧]Origin作图过程中如何让图看起来更生动 2020-05-30 [小技巧]简单设置让你origin导出的图片不在有大白边 2020-05-29 [干货放送]萤火科研资源免费赠送第一期--必 ...
- 前端学习笔记 HTML5 保姆级教程
HTML5 保姆级教程 前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...
- 保姆级教程!将 Vim 打造一个 IDE (Python 篇)
从上周开始我就开始折腾 ,搞了一下 Vim IDE for Python & Go,我将整个搭建的过程整理成本篇文章分享出来,本篇是 Python 版本的保姆级教程,实际上我还写了 Go 版本 ...
- 个人网站搭建保姆级教程(2)- 前端工程umi脚手架搭建
前言 最近搞了个服务器,想着自己做个网站的脚手架,因为自己是纯前端新手,而且半路出家,中途踩了好多坑,准备写5篇给各位大佬们分享一下,如何从0搭建个人网站 服务器购买与环境搭建 前端工程umi脚手架搭 ...
最新文章
- Hive的Security配置
- 再爆安全漏洞,这次轮到Jackson了,竟由阿里云上报
- nginx日志分析查询异常请求IP之狙击网络黑客
- [转载]如何判断js中的数据类型
- Linux 用户(useradd/userdel/groupadd/groupmod
- [转]activity的启动方式(launch mode)
- visio 2016的使用
- PGIS大数据量点位显示方案
- 简单FTP服务器搭建教程
- Ubuntu14.04 学习一:adobe Flash 下载和安装
- 关于iOS14 访问相册权限问题
- Dart中的构造函数
- 元旦节快乐,新的一年新的福利,给大家准备了高清无码的白虎图
- Excel单元格中怎么批量将两行合并成一行
- 数据结构的在C语言中的类型定义
- PV、EV、AC、SV、CV、SPI、CPI
- 查询快递物流提前签收的单号,快速分析筛选的方法
- Android实现图片放大缩小
- 计算机在食品上的应用论文,文字设计在食品包装设计中的运用论文
- Win常见文件后缀名