引入ECharts
echarts提供多种引入方式,请根据你的项目类型选择合适的方式:
模块化包引入
如果你熟悉模块化开发,你的项目本身就是模块化且遵循AMD规范的,那引入echarts将很简单,使用一个符合AMD规范的模块加载器,如esl.js,只需要配置好packages路径指向src即可,你将享受到图表的按需加载等最大的灵活性,由于echarts依赖底层zrender,你需要同时下载zrender到本地,可参考demo,你需要配置如下。
需要注意的是,包引入提供了开发阶段最大的灵活性,但并不适合直接上线,减少请求的文件数量是前端性能优化中最基本但很重要的规则,务必在上线时做文件的连接压缩。
//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
})
模块化单文件引入(推荐)
如果你使用模块化开发但并没有自己的打包合并环境,或者说你不希望在你的项目里引入第三方库的源文件,我们建议你使用单文件引入,同模块化包引入一样,你需要熟悉模块化开发。
自2.1.8起,我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的,build文件夹下已经包含了由echarts-optimizer生成的单文件:
dist(文件夹) : 经过合并、压缩的单文件
line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)
bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)
scatter.js : 散点图
k.js : K线图
pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)
radar.js : 雷达图
map.js : 地图
force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)
chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)
funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)
gauge.js : 仪表盘
eventRiver.js : 事件河流图
treemap.js : 矩阵树图
venn.js : 韦恩图
echarts.js : 这是包含AMD加载器的echarts主文件,需要通过script最先引入
chart(文件夹) : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件,根据应用需求可实现图表类型按需加载
source(文件夹) : 经过合并,但并没有压缩的单文件,内容同dist,可用于调试
采用单一文件使用例子见ECharts单一文件引入,存放在example/www下,首先你需要通过script标签引入echarts主文件
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
</body>
在主文件引入后你将获得一个AMD环境,配置require.conifg如下:
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
})
</script>
</body>
require.config配置后就可以通过动态加载使用echarts
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
})
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'))
var option = {
...
}
myChart.setOption(option)
}
)
</script>
</body>
总结来说,模块化单文件引入ECharts,你需要如下4步:
为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)
通过script标签引入echarts主文件
为模块加载器配置echarts的路径,从当前页面链接到echarts.js所在目录,见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)
详见入门教程 ( Getting started ) »
标签式单文件引入
自1.3.5开始,ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的,或者是基于CMD规范(如使用的是seajs),那么引入基于AMD模块化的echarts可能并不方便,我们建议你采用srcipt标签式引入,忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间:echarts,zrender,可参考ECharts标签式引入,需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持,如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错,解决的办法就是把标签移动到body内(后)。
标签式引入环境中,常用模块的引用可通过命名空间直取,同模块化下的路径结构,如:
echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color')
//from echarts example<body>
<div id="main" style="height:400px"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'))
var option = {
...
}
myChart.setOption(option)
</script>
</body>
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线图、地图、和弦图以及力导向布局图,同时支持任意维度的堆积和多图表混合展现。
plotlyexpress绘制的散点图没有电与线型图类似的是,散点图也是一个个点集构成的。但不同之处在于,散点图的各点之间不会按照前后关系以线条连接起来。
用plt.plot画散点图
奇怪,代码和前面的例子差不多,为什么这里显示的却是散点图而不是sin曲线呢?原因有二:一是点集比较少,稀疏,才30个;二是没有指定线型。
用plt.scatter画散点图
scatter专门用于绘制散点图,使用方式和plot方法类似,区别在于前者具有更高的灵活性,可以单独控制每个散点与数据匹配,并让每个散点具有不同的属性。
一般使用scatter方法,如下例子就可以了:
plt.scatter(x, y, marker='o')
下面看一个随机不同透明度、颜色和大小的散点例子:
主要参数说明:
x,y:输入数据
s:标记大小,以像素为单位
c:颜色
marker:标记
alpha:透明度
linewidths:线宽
edgecolors :边界颜色
上面的例子可以拓展到Scikit-learn中经典的鸢尾花iris数据来演示。
Iris数据集是常用的分类实验数据集,由Fisher在1936收集整理,是一类多重变量分析的数据集。数据集包含150个数据,分为3类,每类50个数据,每个数据包含4个属性。通过花萼长度,花萼宽度,花瓣长度,花瓣宽度4个属性预测鸢尾花卉属于(Setosa,Versicolour,Virginica)三个种类中的哪一类。