Echarts.js简介

JavaScript013

Echarts.js简介,第1张

在平时开发项目时,免不了需要对数据进行图表显示的需求,比如:趋势图、饼状图、柱形图等。

Echarts.js是来自百度团队研发的图表js插件,利用HTML+js实现折线图、饼状图、热点图、3d图形等等,可在PC和移动端显示,加载速度快,功能丰富。

https://echarts.apache.org/zh/index.html

官网首页有着很多实例以及相关介绍,获取echart.js可以从本人百度网盘获取,包含所有图表组件,可直接引用。

链接: https://pan.baidu.com/s/1IEm8NGwqq4ExgYWp8mz9CA

提取码:aihy

为Echarts放置一个具备宽高的DOM容器

Echarts加载数据

D3.js

D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到 DOM,然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的

HMTL 表格,或是利用它的流体过度和交互,用相似的数据创建惊人的 SVG 条形图。

ChartJS

Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas

基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于

5KB。

Highcharts JS

Highcharts JS 是一个制作图表的纯 Javascript 类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括 iPhone、IE

和火狐等等对个人用户完全免 费纯JS,无BS支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图跨语言:不管是

PHP、Asp.net 还是 Java 都可以使用。

Fusioncharts

FusionCharts Suite XT 是个专业的 JavaScript

图表库,能创建任何类型的图表。它创建的图表都是可以进行完全自定义的,标签,字体,边界等等,都可以进行修改。它有很强的交互功能,有许多信息提示,可 点击的

legend 关键字,还有 dril-down,缩放/滚动 和单击打印图表功能。

Flot

Flot 是受 Plotr 和 PlotKit 的 启发,Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为

flot。 flot 是个纯 JavaSript 库,专注于简单的使用方式,迷人的外观和交互式特性。支持的浏览器有: Internet Explorer 6+,

Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

Chartist.js

Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图,可以被控制,并通过对 CSS3 媒体查询和 SASS

定制。另外 Chartist.js 提供很酷的动画。

n3-charts

如果你是一个 AngularJS 开发者,你一定喜欢款有趣的图表。它是建立在 D3.js 和 AngularJS 的基础上,提供了可定制的

AngularJS 指令的形式不同标准的图表。

Ember Charts

Ember Charts 是一个基于 Ember.js 和 D3.js

的图表库。它包括时间序列、柱状图、饼图、点图,很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展的。

Chartkick

Chartkick 是专为 Ruby 应用程序的 JavaScript

图表库。它提供了所有主要的图表类型,如饼图,柱形图,条形图,面积,地理,时间,以及多个系列。

MeteorCharts

它有一个很酷的图表生成器,为您提供选项来选择图表,选择主题,然后生成一个图表。

amCharts

amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5 Charts、Javascript/HTML5

Stock Chart、JavaScript Maps 三种图表组件。

EJS Chart

EJS图表声称自己是企业准备的图表库。图表看起来很干净,可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。

uvCharts

uvCharts 是一个开源的 JavaScript 图表库,号称有100多个自定义选项。它拥有12种不同的标准图表类型,开箱即用。

ECharts

基于 Canvas,纯 JavaScript

图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图,同时支持任意维度的堆积和多图表混合展现。

1、使用Ext.container.Container--创建容器

2、使用Ext.panel.Panel--创建面板

3、使用Ext.toolbar.ToolBar--创建工具条

4、使用Ext.tab.Panel--创建Tab面板

5、使用Ext.container.Viewport--整体布局

6、使用Ext.window.Window--创建窗口

7、使用Ext.window.MessageBox--创建对话框

8、使用Ext.menu.CheckItem、Ext.menu.ColorPicker、Ext.menu.DatePicker实现特殊菜单项

9、使用Ext.Ation--创建按钮

10、使用Ext.ProgressBar--创建进度条

11、使用Ext.slider.Single--创建滑动条

12、使用Ext.Img--创建图片

13、使用Ext.Editor--创建编辑器

14、使用Ext.tip.ToolTip--创建提示

15、使用Ext.QuickTipManager和Ext.tip.QuickTip--创建提示

16、使用Ext.ux.GMapPanel实现Google地图

17、使用Ext.form.field.ComboBox--创建复合框

18、使用Ext.data.Store与Ext.data.Model管理数据

19、使用Ext.data.Proxy.Proxy和Ext.data.reader.Reader读取数据

20、使用Ext.grid.Panel--生成表格

21、使用Ext.grid.column.Column-定义列

22、使用Ext.grid.Panel显示远程数据

23、使用Ext.tree.Panel生成数

xtype Class 描述

button Ext.Button 按钮

splitbutton Ext.SplitButton 带下拉菜单的按钮

cycle Ext.CycleButton 带下拉选项菜单的按钮

buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)

slider Ext.Slider 滑动条

progressExt.ProgressBar 进度条

statusbar Ext.StatusBar 状态条,2.2加进来,3.0 又去了

colorpaletteExt.ColorPalette调色板

datepicker Ext.DatePicker 日期选择面板

xtype Class 描述

window Ext.Window 窗口

viewportExt.ViewPort视口,即浏览器的视口,能随之伸缩

box Ext.BoxComponent盒子组件,相当于一个 <div>

component Ext.Component 组件

container Ext.Container 容器

panel Ext.Panel 面板

tabpanelExt.TabPanel选项面板

treepanel Ext.tree.TreePanel 树型面板

flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)

gridExt.grid.GridPanel 表格

editorgrid Ext.grid.EditorGridPanel可编辑的表格

propertygridExt.grid.PropertyGrid 属性表格

editor Ext.Editor 编辑器

dataviewExt.DataView数据显示视图

listviewExt.ListView列表视图

xtype Class 描述

paging Ext.PagingToolbar 分页工具条

toolbar Ext.Toolbar 工具栏

tbbuttonExt.Toolbar.Button 工具栏按钮

tbfill Ext.Toolbar.Fill工具栏填充区

tbitem Ext.Toolbar.Item工具条项目

tbseparator Ext.Toolbar.Separator 工具栏分隔符

tbspacerExt.Toolbar.Spacer 工具栏空白

tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮

tbtext Ext.Toolbar.TextItem工具栏文本项

xtype Class 描述

menuExt.menu.Menu 菜单

colormenu Ext.menu.ColorMenu 颜色选择菜单

datemenuExt.menu.DateMenu 日期选择菜单

menubaseitemBaseItem

menucheckitem Ext.menu.CheckItem 选项菜单项

menuitemExt.menu.Item

menuseparator Ext.menu.Separator 菜单分隔线

menutextitemExt.menu.TextItem 文本菜单项

xtype Class 描述

formExt.FormPanel/Ext.form.FormPanel表单面板

checkboxExt.form.Checkbox 多选框

combo Ext.form.ComboBox 下拉框

datefield Ext.form.DateField 日期选择项

timefield Ext.form.TimeField 时间录入项

field Ext.form.Field 表单字段

fieldsetExt.form.FieldSet 表单字段组

hidden Ext.form.Hidden 表单隐藏域

htmleditor Ext.form.HtmlEditor HTML 编辑器

label Ext.form.Label 标签

numberfield Ext.form.NumberField数字编辑器

radio Ext.form.Radio 单选按钮

textareaExt.form.TextArea 多行文本框

textfield Ext.form.TextField 表单文本框

trigger Ext.form.TriggerField 触发录入项

checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)

displayfieldExt.form.DisplayField 仅显示,不校验/不被提交的文本框

radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)

xtype Class 描述

chart Ext.chart.Chart 图表组件

barchartExt.chart.BarChart 柱状图

cartsianchart Ext.chart.CartesianChart

columnchart Ext.chart.ColumnChart

linechart Ext.chart.LineChart 连线图

piechartExt.chart.PieChart 扇形图

xtype Class 描述

arraystore Ext.data.ArrayStore

directstore Ext.data.DirectStore

groupingstore Ext.data.GroupingStore

jsonstore Ext.data.JsonStore

simplestore Ext.data.SimpleStore

store Ext.data.Store

xmlstoreExt.data.XmlStore