Python 实战 · 从 0 到 1 搭建直播视频平台
Barry
某上市公司技术研发总监
3717 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 42 讲
Python 实战 · 从 0 到 1 搭建直播视频平台
15
15
1.0x
00:00/00:00
登录|注册

14|ECharts实战:可视化如何更好地服务于创作者?

你好,我是 Barry。
上节课我们一起学习了数据中心的数据业务需求、数据采集逻辑和数据呈现效果。在数据分析呈现的时候,我们用到了很多数据可视化的组件,有了这些组件,就能让我们轻松地实现数据可视化,直观展示出我们想要的分析结果,而且能帮用户清晰地看到数据间的关系。
其实在我们实际项目开发中,数据可视化的应用是非常多的。因此,如何熟练应用数据可视化组件,也是我们在日常开发中的一项必备技能,这样会让我们技术栈更加完善。这节课,我们就一起来认识学习应用一款轻量级数据可视化组件库——ECharts。

认识 ECharts

我们先来认识一下 ECharts,ECharts 是一款基于 JavaScript 的数据可视化图表库。ECharts 由百度团队开源,在 2018 年初捐赠给 Apache 基金会,成为 ASF 孵化级项目。
2021 年 1 月,Apache 基金会宣布 ECharts 项目正式成为 Apache 顶级项目。同样在 2021 年 1 月,ECharts 5 正式发布上线,在这个过程中 ECharts 不断地更新迭代,满足用户对数据可视化的各类需求。
提到前端可视化图表库,热度最高、也最常用的两个库就是 D3.js 和 ECharts 了,我们在课程中使用的也是 ECharts。那为什么不选 D3.js 呢?这里我们简单分析一下,也让你有一个全面的了解。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

ECharts实战:如何更好地利用可视化服务于创作者? ECharts是一款基于JavaScript的数据可视化图表库,由百度团队开源并成为Apache顶级项目。相比D3.js,ECharts更适合初学者,因为它使用Canvas绘制图形,兼容性更好,且配置门槛低。ECharts不断更新迭代,满足用户对数据可视化的各类需求,能够呈现多种图表样式,适用于各种数据可视化场景。 在学习应用ECharts时,重点关注使用手册、API和配置项手册,尤其要熟悉常见配置的作用。通过示例库,可以直接修改数据和配置项,观察展示效果,同时养成良好的学习方式,不断发现问题和解决问题,熟悉ECharts的基础用法。 在HTML中使用ECharts,需要引入echarts.js并准备一个\<div>标签作为图表的占位。通过配置项和图表类型的灵活切换,可以轻松实现ECharts的应用。建议读者多尝试,掌握应用方法后,使用ECharts在HTML中将变得非常轻松。 ECharts作为一款轻量级数据可视化组件库,为创作者提供了强大的工具,帮助他们轻松实现数据可视化,直观展示分析结果,清晰展现数据间的关系。通过学习和应用ECharts,创作者可以更好地服务于数据分析和可视化的需求。 文章还介绍了在Vue项目中如何结合ECharts实现数据可视化,包括安装、全局引用和具体应用。通过实际案例演练,读者可以更好地理解ECharts在项目中的应用方法。 总的来说,本文通过介绍ECharts的特点、学习方法和实际应用,为读者提供了全面的了解和使用ECharts的指导,帮助他们更好地利用可视化服务于创作者。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Python 实战 · 从 0 到 1 搭建直播视频平台》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(2)

  • 最新
  • 精选
  • peter
    请教老师几个问题: Q1:安卓端canva与HTML、CSS、Js有关吗? 老师的回答:“在安卓端,Canva则采用了完整的前端框架技术,包括HTML模板、JavaScript代码、组件等” 。我不确定。不过我感觉很惊讶,我潜意识里认为安卓的canva和这些没有关系,应该是利用底层绘制原理完成绘制的。我再搜搜。 Q2:Vue文件是被谁解析的?是VSCode自带的编译器解析的吗? 还是Node解析的? Q3:ECharts支持canvas、SVG等,那具体选哪个?是ECharts自主选择吗? Q4:npm用来安装包,假如不需要安装,vue还需要node吗? Q5:ECharts与node有关吗?与vue有关吗?

    作者回复: 1、这样去理解,我之前说的可能让你有些误解,是这样的,安卓端Canva与HTML、CSS和JavaScript是没有直接关系,虽然Canva不直接使用HTML、CSS和JS进行图形设计,但是Canva可以与开发人员协同工作,例如在Canva中设计完成后,可以导出为图片或HTML文件,然后在网页中使用,所以它们是这样的关系。这样说不知道你是否清晰一些。 2、Vue文件是由Node.js解析的,Vue文件是一种JavaScript模块,它使用ES6模块语法,这样就需要一个模块解析器来解析它们。Node.js中包含了一个ES6模块解析器,可以解析Vue文件和其他使用ES6模块语法的文件,是这样的应用关系。 3、ECharts提供了自主选择渲染器的功能,可以根据需要选择使用canvas或SVG进行渲染,开发者可以选择。 4、Node.js是用于执行JavaScript的服务器端环境,而Vue.js是一个JavaScript框架,需要在Node.js环境中运行。所以就算不使用npm来安装Vue.js或其依赖项,仍然需要在服务器上安装Node.js才能运行Vue.js应用程序,是这样的原因,你要明白它的核心作用。 5、这个没关系,ECharts是可视化库,我在课程中也说了,它可以在HTML使用也可以在Vue中使用,这个是没有直接关系的。

    2023-05-24归属地:北京
    1
  • zgy
    搞反了吧,canvas 能兼容 IE6 吗?https://caniuse.com/?search=canvas

    作者回复: 我们说的是ECharts,ECharts可以兼容IE6及以上的所有主流浏览器。ECharts 使用 Canvas 来绘制图形,是这样的关系。

    2023-09-21归属地:上海
收起评论
显示
设置
留言
2
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部