ECharts 教程

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

ECharts 提供了丰富的图表类型和交互能力,使用户能够通过简单的配置生成各种各样的图表,包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。
ECharts 遵循 Apache-2.0 开源协议,免费商用。
ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。

第一个 ECharts 实例
image.png

ECharts 特性
ECharts 包含了以下特性:
丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
多种数据格式无需转换直接使用: 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,此外还支持输入 TypedArray 格式的数据。
千万数据的前端展现: 通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量。
移动端优化: 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。
多渲染方案,跨平台使用: 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。
深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等,传入的数据也可以是多个维度的。
动态数据: 数据的改变驱动图表展现的改变。
绚丽的特效: 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。
通过 GL 实现更多更强大绚丽的三维可视化: 在 VR,大屏场景里实现三维的可视化效果。

无障碍访问(4.0+): 支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问!

相关文章
|
9月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
198 2
|
JavaScript
|
前端开发 JavaScript 数据可视化
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图,一步步完善,最终做出可读性很高的可视化图表。 根据本教程在卡拉云中搭建的折线图 Demo,你可以立即注册卡拉云,跟随本教程学习 跟随本教程你将学到 1.折线外观属性 折线增加弧线平滑过渡 折线图变为散状圆点 实线改为虚线 折线指定颜色 增加数据显示 表格外观属...
1372 0
|
JSON JavaScript 前端开发
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
1243 0
|
8月前
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
7月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
400 0
|
9月前
|
数据可视化 前端开发 定位技术
ECharts前端教程
ECharts前端教程
151 3
|
9月前
|
编解码 数据可视化 前端开发
ECharts 对比 Highcharts 使用教程
ECharts 对比 Highcharts 使用教程
202 1
|
数据可视化
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
540 0
|
前端开发 JavaScript API
React Echarts 使用教程 - 如何在 React 中加入图表(内附数据看板实战搭建案例)
Ehcarts 作为数据展示的组件,应用场景丰富,所以在 React 里引入 Echarts 图表是每个前端必会技能。而 Echarts配置项多且复杂,每个配置项都会细分很多个配置小项,并且还对外暴露了一套 API,包括图表实例,事件监听等,还是有一定的上手难度。本文手把手教大家如何在 React 里使用 Echarts,并结合实际使用场景,分享我是如何处理图表自适应等具体问题。 最后来一个实战教学,教大家如何结合 ant-design React UI 框架,开发企业级的「数字币走势数据看板」,帮助大家加深对 Echarts 的理解。

热门文章

最新文章