ECharts 教程

ECharts 是一个利用 JavaScript 完成的开源可视化库,涵盖各行业图表,知足各类须要。

ECharts 遵守 Apache-2.0 开源和谈,收费商用。

ECharts 兼容以后绝大局部浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种装备,可随时随地率性揭示。

浏览本教程前,您须要领会的常识:

浏览本教程,您须要有以下根本:

第一个 ECharts 实例

实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="//cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 为ECharts筹办一个具有巨细(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于筹办好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的设置装备摆设项和数据 var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:'销量' }, xAxis: { data: "衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子" }, yAxis: {}, series: { name: '销量', type: 'bar', data: 5, 20, 36, 10, 10, 20 } }; // 利用刚指定的设置装备摆设项和数据显现图表。 myChart.setOption(option); </script> </body> </html>

亲身尝尝 »

点击 "亲身尝尝" 按钮检查在线实例

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+): 撑持主动按照图表设置装备摆设项智能天生描写,使得瞽者能够在朗诵装备的赞助下领会图表内容,让图表能够被更多人群拜候!