为了账号安全,请及时绑定邮箱和手机立即绑定

【前端ECharts教程】ECharts基础讲解快速入门

标签:
前端工具

ECharts  快速入门教程

ECharts是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。

ECharts 遵循 Apache-2.0 开源协议,免费商用。

ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。

阅读以下文章您需要有以下基础

01 HTML

02 JavaScript 

--------------  分割线  ---------------

基于准备好的 dom,初始化 echarts 实例:

https://img3.sycdn.imooc.com/601bf66e00016f4b04990034.jpg

指定图表的配置项和数据:

https://img2.sycdn.imooc.com/601bf6800001471103770436.jpg

使用刚指定的配置项和数据显示图表:

https://img3.sycdn.imooc.com/601bf68c0001ff8602540034.jpg

ECharts 中有一些通用的样式,如阴影、透明度、颜色、边框颜色、边框宽度等,这些样式一般都会在 series 的itemStyle里设置:

https://img3.sycdn.imooc.com/601bf69a0001995203770203.jpg

itemStyle 有normal和emphasis两个选项, normal选项是正常状态的样式,emphasis是鼠标 hover 时候的高亮样式:

https://img4.sycdn.imooc.com/601bf6a600015d8a03800153.jpg

要把整个主题改成深色主题,需要改 背景色 和 文本样式。

背景色是 全局 样式,所以,需要直接在option下设置backgroundColor:

https://img1.sycdn.imooc.com/601bf6b40001c20602750078.jpg

文本样式可以设置全局的textStyle:

https://img3.sycdn.imooc.com/601bf6c20001e27b03680127.jpg

也可以在每个series分别设置,每个series的文本设置在label.normal.textStyle:

https://img4.sycdn.imooc.com/601bf6cd000193fe05270232.jpg

设置标签的视觉引导线labelLine的颜色(label 和 labelLine 也有 normal 和emphasis 两个状态):

https://img2.sycdn.imooc.com/601bf6db00010ff704010176.jpg

ECharts 中每项数据样式可以分别设置data下的数据项实现:

https://img2.sycdn.imooc.com/601bf6e700015d3502890226.jpg

ECharts 中实现异步数据的更新非常简单,在图表初始化后通过 jQuery 等工具异步获取数据后,在 setOption 填入数据和配置项即可。

或者先设置完其它的不涉及数据的样式,显示一个空的直角坐标轴,然后获取数据后填入数据:

https://img1.sycdn.imooc.com/601bf6f400017ac705930844.jpg

ECharts 默认提供了加载动画,只需要调用showLoading方法显示。数据加载完成后再调用hideLoading方法隐藏加载动画:

https://img1.sycdn.imooc.com/601bf6ff0001938e03810127.jpg

ECharts 提供了 Media Query『随着容器尺寸改变而自适应』,设置如下:

https://img1.sycdn.imooc.com/601bf70d00016e5a05590836.jpg

好啦,关于ECharts基础快速入门的讲解就到这里啦~


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消