后使用快捷导航没有帐号？
浏览&&：&2117
回复&&：&0
回复的帖子
本帖最后由 西北的风 于
14:11 编辑
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
architecture.png (22.2 KB, 下载次数: 0)
09:07 上传
1.png (41.13 KB, 下载次数: 0)
09:50 上传
2.png (61.65 KB, 下载次数: 0)
09:50 上传
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：
charts.jpg (61.93 KB, 下载次数: 0)
09:08 上传
单图表类型：line
line1.png (46.91 KB, 下载次数: 0)
09:08 上传
line2.png (49.23 KB, 下载次数: 0)
09:08 上传
line3.png (44.88 KB, 下载次数: 0)
09:08 上传
line4.png (46.48 KB, 下载次数: 0)
09:08 上传
单图表类型：bar
bar1.png (35.6 KB, 下载次数: 0)
09:08 上传
bar2.png (49.82 KB, 下载次数: 0)
09:08 上传
bar3.png (32.28 KB, 下载次数: 0)
09:08 上传
bar4.png (33.12 KB, 下载次数: 0)
09:08 上传
单图表类型：scatter
scatter1.png (75.81 KB, 下载次数: 0)
09:08 上传
dataRange1.png (69.99 KB, 下载次数: 0)
09:08 上传
scatter2.png (60.07 KB, 下载次数: 0)
09:08 上传
单图表类型：k
k1.png (48.53 KB, 下载次数: 0)
09:08 上传
k.png (48.29 KB, 下载次数: 0)
09:08 上传
单图表类型：pie
pie1.png (42.72 KB, 下载次数: 0)
09:08 上传
pie2.png (41.27 KB, 下载次数: 0)
09:08 上传
pie4.png (53.74 KB, 下载次数: 0)
09:08 上传
单图表类型：radar
radar1.png (51.66 KB, 下载次数: 0)
09:08 上传
radar2.png (38.87 KB, 下载次数: 0)
09:08 上传
单图表类型：chord
chord1.png (49.47 KB, 下载次数: 0)
09:08 上传
chord2.png (88.13 KB, 下载次数: 0)
09:08 上传
单图表类型：force
force1.png (58.77 KB, 下载次数: 0)
09:08 上传
force2.png (112.97 KB, 下载次数: 0)
09:08 上传
webkit-dep.png (136.08 KB, 下载次数: 0)
09:09 上传
单图表类型：map
map1.png (76.93 KB, 下载次数: 0)
09:08 上传
map3.png (42.29 KB, 下载次数: 0)
09:08 上传
map4.png (67.74 KB, 下载次数: 0)
09:08 上传
map8.png (42.59 KB, 下载次数: 0)
09:08 上传
map6.png (59.32 KB, 下载次数: 0)
09:08 上传
map16.png (38.51 KB, 下载次数: 0)
09:08 上传
单图表类型：heatmap
heatmap.png (144.75 KB, 下载次数: 0)
09:08 上传
heatmap2.png (141.08 KB, 下载次数: 0)
09:08 上传
heatmap_map.png (99.76 KB, 下载次数: 0)
09:08 上传
单图表类型：gauge
gauge4.png (57.35 KB, 下载次数: 0)
09:08 上传
gauge3.png (34.39 KB, 下载次数: 0)
09:08 上传
单图表类型：funnel
funnel1.png (37.97 KB, 下载次数: 0)
09:08 上传
funnel2.png (48.24 KB, 下载次数: 0)
09:08 上传
funnel3.png (56.81 KB, 下载次数: 0)
09:08 上传
单图表类型：eventRiver
eventRiver1.png (29.44 KB, 下载次数: 0)
09:08 上传
eventRiver2.png (29.78 KB, 下载次数: 0)
09:08 上传
单图表类型：treemap
treemap.png (18.29 KB, 下载次数: 0)
09:08 上传
treemap1.png (16.49 KB, 下载次数: 0)
09:08 上传
单图表类型：venn
venn.png (24.48 KB, 下载次数: 0)
09:08 上传
单图表类型：tree
tree1.png (29.8 KB, 下载次数: 2)
09:08 上传
tree2.png (84.27 KB, 下载次数: 0)
09:08 上传
单图表类型：wordCloud
wordCloud.png (61.98 KB, 下载次数: 1)
09:09 上传
引入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（文件夹） : 经过合并、压缩的单文件& &1& &echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
& && && & 2& & chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
& && && && && &&&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 : 韦恩图
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件
//from echarts example
&body&
& & &div id=&main& style=&height:400&&&/div&
& & ...
& & &script src=&./js/echarts.js&&&/script&
&/body&复制代码在主文件引入后你将获得一个AMD环境，配置require.conifg如下：
//from echarts example
&body&
& & &div id=&main& style=&height:400&&&/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:400&&&/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:400&&&/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&复制代码可以直接引入的单文件如下：
dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试复制代码详见入门教程 ( Getting started ) >>
自定义构建echarts单文件
详见 echarts-optimizer 安装使用说明：README.md
通过require获得echarts接口（或者命名空间）后可实例化图表，echarts接口仅有一个方法init，执行init时传入一个具备大小的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实现为多实例的，同一页面可在多个dom上init出多个图表，同一个dom上多次init将自动释放已有实例（1.4.0+）。init方法说明如下：
3.png (12.83 KB, 下载次数: 0)
09:50 上传
图表实例可用方法见方法
引入ECharts后的的初始化代码如下：
// 作为入口
require(
& & [
& && &&&'echarts',
& && &&&'echarts/chart/pie'
& & ],
& & function (ec) {
& && &&&var myChart = ec.init(document.getElementById('main'));
& && &&&myChart.setOption({...});
& & }
);
// -----------------------------
// 非入口或再次使用，图表已被加载注册
require('echarts').init(dom).setOption({...});
// 如果需要再次使用ECharts的图表实例，建议你还是保存init返回的图表实例吧
var myChart = require('echarts').init(dom);
myChart.setOption({...});
熟悉模块化的你可以跳过了下面代码了
// 不习惯模块化的你当然可以
require(['echarts'], function (ec){
& & echarts =
});
// 是的，把echarts加载后保存起来作为命名空间使用复制代码实例方法
实例指的就是接口init()返回的对象，即上述代码中的“myChart”，非get接口均返回自身self支持链式调用
4.png (72.51 KB, 下载次数: 0)
09:50 上传
4-1.png (33.02 KB, 下载次数: 0)
09:50 上传
4-2.png (54.58 KB, 下载次数: 0)
09:50 上传
4-3.png (65.65 KB, 下载次数: 0)
09:50 上传
图表选项，包含图表实例任何可配置选项： 公共选项 ， 组件选项 ， 数据选项
5.png (88.17 KB, 下载次数: 0)
09:50 上传
时间轴，每个图表最多仅有一个时间轴控件，try bar >>、scatter >>、pie >>、map >>
5-1.png (83.38 KB, 下载次数: 0)
09:50 上传
5-2.png (37.41 KB, 下载次数: 0)
09:50 上传
5-3.png (44.61 KB, 下载次数: 0)
09:50 上传
timeline.png (29.88 KB, 下载次数: 0)
10:29 上传
标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。
6-1.png (72.83 KB, 下载次数: 0)
09:50 上传
6-2.png (18.8 KB, 下载次数: 0)
09:50 上传
title.png (17.44 KB, 下载次数: 0)
09:08 上传
工具箱，每个图表最多仅有一个工具箱。try this >>
7-1.png (63.23 KB, 下载次数: 0)
09:50 上传
7-2.png (10.14 KB, 下载次数: 0)
09:50 上传
7-3.png (133.5 KB, 下载次数: 0)
09:50 上传
提示框，鼠标悬浮交互时的信息提示。&&
8-1.png (76.68 KB, 下载次数: 0)
09:50 上传
8-2.png (41.45 KB, 下载次数: 0)
09:50 上传
& && && && && && && &&&
内容格式器formatter：try this >>
{string}，模板（Template），其变量为：
& && & {a} | {a0}
& && & {b} | {b0}
& && & {c} | {c0}
& && & {d} | {d0} （部分图表类型无此项）
& && & {e} | {e0} （部分图表类型无此项）
& && & 多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
& && & 其中变量a、b、c、d在不同图表类型下代表数据含义为：
& && && && &&&折线（区域）图、柱状（条形）图、K线图 : a（系列名称），b（类目值），c（数值）, d（无）
& && && && &&&散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
& && && && &&&地图 : a（系列名称），b（区域名称），c（合并数值）, d（无）
& && && && &&&饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）
& && && && &&&力导向图, 和弦图 :
& && && && && && &&&节点 : a（系列名称），b（节点名称），c（节点值）, d(节点类目索引)
& && && && && && &&&边 : a（系列名称），b（边名称，默认为大端节点名称-小端节点名称），c（link.value）, d(大端节点 name 或者 index), e(小端节点& && && && && && && && && && && && && & name& && && && && && && && && &&&或者 index)
{Function}，传递参数列表为[params, ticket, callback]，详见下：
& && & &Array& params : 数组内容同模板变量，
[
& & {
& && &&&seriesIndex: 0,
& && &&&seriesName: '一周销量',
& && &&&name: '周一',
& && &&&dataIndex: 0,
& && &&&data: data,
& && &&&name: name,
& && &&&value: value,
& && &&&percent: special,& && & // 饼图
& && &&&indicator: special,& &&&// 雷达图、力导向、和弦
& && &&&value2: special2,& && & // 力导向、和弦
& && &&&indicator2: special2& & // 力导向、和弦
& & },
& & {..},
& & ...
]复制代码&String& ticket : 异步回调标识&Function& callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html*函数回调时this指针指向当前图表实例（myChart）
触发类型：
QQ截图58.png (87.08 KB, 下载次数: 0)
12:21 上传
图例，每个图表最多仅有一个图例。try this >>
9-1.png (67.67 KB, 下载次数: 0)
09:50 上传
9-2.png (28.37 KB, 下载次数: 0)
09:50 上传
legend.png (15.17 KB, 下载次数: 0)
12:24 上传
值域选择，每个图表最多仅有一个值域控件。try this >>
10-1.png (80.18 KB, 下载次数: 0)
09:50 上传
10-2.png (74.95 KB, 下载次数: 0)
09:50 上传
dataRange.png (35.36 KB, 下载次数: 0)
09:08 上传
数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。try this >>
11.png (92.5 KB, 下载次数: 0)
09:50 上传
dataZoom.png (9.64 KB, 下载次数: 0)
09:08 上传
roamController
缩放漫游组件，仅对地图有效。try this >>
12.png (70.1 KB, 下载次数: 0)
09:51 上传
roamController.png (36.92 KB, 下载次数: 0)
09:08 上传
直角坐标系内绘图网格
13.png (65.16 KB, 下载次数: 0)
09:51 上传
grid.jpg (25.91 KB, 下载次数: 0)
09:08 上传
直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数组。最多同时存在2条横轴，单条横轴时可指定安放于grid的底部（默认）或顶部，2条同时存在时位置互斥，默认第一条安放于底部，第二条安放于顶部。
坐标轴有三种类型，类目型、数值型和时间型（区别详见axis），横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型，具体参数详见axis。
直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数组。最多同时存在2条纵轴，单条纵轴时可指定安放于grid的左侧（默认）或右侧，2条同时存在时位置互斥，默认第一条安放于左侧，第二条安放于右侧。
坐标轴有三种类型，类目型、数值型和时间型（区别详见axis），纵轴通常为数值型，但条形图时则纵轴为类目型，具体参数详见axis。
坐标轴有三种类型，类目型、数值型和时间型，他们的区别在于：
类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标数值型：需要指定数值区间，不指定时则自定计算数值范围，坐标轴内包含数值区间内容全部坐标时间型：时间型坐标轴用法同数值型，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同自动切换需要显示的时间粒度
下面是坐标轴的全部选项，其中个别选项仅在个别类型时有效，请注意适用类型。try this >>
14-1.png (77.99 KB, 下载次数: 0)
09:51 上传
14-2.png (34.51 KB, 下载次数: 0)
09:51 上传
boundaryGap端空白策略
88.png (50.69 KB, 下载次数: 0)
12:34 上传
axisScale1.png (24.78 KB, 下载次数: 0)
09:07 上传
axisScale2.png (32.33 KB, 下载次数: 0)
09:08 上传
axis属性说明
axisDetail.png (25 KB, 下载次数: 0)
09:07 上传
axis.axisline
坐标轴线，默认显示且带如下样式：
15.png (16.12 KB, 下载次数: 0)
09:51 上传
axis.axisTick
坐标轴小标记，数值轴和时间轴默认不显示，类目轴默认显示，默认样式见下：
16.png (35.38 KB, 下载次数: 0)
09:51 上传
axis.axisLabel
坐标轴文本标签选项
17.png (42.67 KB, 下载次数: 0)
09:51 上传
& && && && && && && &
间隔名称格式器formatter：
{string}，模板（Template），其变量为：
{value}: 内容或值
{Function}，传递参数同模板变量：
eg：function (value){return &星期& + &日一二三四五六&.charAt(value);'}
axis.splitline
分隔线，默认显示且带如下样式：
18.png (16.67 KB, 下载次数: 0)
09:51 上传
& && && && && && && &
axis.splitArea
分隔区域，默认不显示：
19.png (18.84 KB, 下载次数: 0)
09:51 上传
& && && && && && && &
类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行，如:
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ..., 'Dec']复制代码当需要对个别标签进行个性化定义时，数组项可用对象，接受textStyle设置个性化标签，如：
[
& & 'Jav', 'Feb', 'Mar',
& &&&{
& && &&&value:'Apr',& && && && &//文本内容，如指定间隔名称格式器formatter，则这个值将被作为模板变量值或参数传入
& && &&&textStyle:{& && && && & //详见textStyle
& && && && &color : 'red'
& && && && &...
& && &&&}
& &&&},
& & 'May', '...'
]复制代码
20-1.png (53.79 KB, 下载次数: 0)
09:51 上传
20-2.png (22.45 KB, 下载次数: 0)
09:51 上传
indicator : [
& & {text : '外观'},
& & {text : '拍照', min : 0},
& & {text : '系统', min : 0, max : 100},
& & {text : '性能', axisLabel: {...}},
& & {text : '屏幕'}
]复制代码series（通用）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型：
21.png (55.43 KB, 下载次数: 0)
09:51 上传
series（直角系）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型：
22-1.png (69.75 KB, 下载次数: 0)
09:51 上传
22-2.png (53.95 KB, 下载次数: 0)
09:51 上传
series（饼图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
23.png (34.14 KB, 下载次数: 0)
09:51 上传
series（雷达图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
24.png (15.92 KB, 下载次数: 0)
09:51 上传
series（地图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
25.png (85.77 KB, 下载次数: 0)
09:51 上传
series（热力图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
26.png (26.41 KB, 下载次数: 0)
09:51 上传
series（力导向布局图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
27-1.png (71.25 KB, 下载次数: 0)
09:51 上传
27-2.png (22.95 KB, 下载次数: 0)
09:51 上传
series（和弦图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
28.png (63.7 KB, 下载次数: 0)
09:51 上传
series（仪表盘）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
29-1.png (63.57 KB, 下载次数: 0)
09:51 上传
29-2.png (52.72 KB, 下载次数: 0)
09:51 上传
29-3.png (34.36 KB, 下载次数: 0)
09:51 上传
series（漏斗图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
30.png (56 KB, 下载次数: 0)
09:51 上传
series（事件河流图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
31.png (42.65 KB, 下载次数: 0)
09:51 上传
series（矩形树图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
32.png (45.53 KB, 下载次数: 0)
09:51 上传
series（树图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
33.png (51.11 KB, 下载次数: 0)
09:51 上传
series（维恩图）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
34.png (17.71 KB, 下载次数: 0)
09:51 上传
series（字符云）
驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据：
35.png (33.41 KB, 下载次数: 0)
09:51 上传
series.data
系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值，如:
[12, 34, 56, ..., 10, 23]复制代码当某类目对应数据不存在时（ps：'不存在' 不代表值为 0），可用'-'表示，无数据在折线图中表现为折线在该点断开，在柱状图中表现为该点无柱形，如：
[12, '-', 56, ..., 10, 23]复制代码当需要对个别内容进行个性化定义时，数组项可用对象，如：
[
& & 12, 34,
& & {
& && &&&value : 56,
& && &&&tooltip:{},& && && && & //自定义特殊tooltip，仅对该item有效，详见tooltip
& && &&&itemStyle:{}& && && && &//自定义特殊itemStyle，仅对该item有效，详见itemStyle
& & },
& & ..., 10, 23
]复制代码当图表类型为scatter（散点图或气泡图）时，其数值设置比较特殊，他的横纵坐标轴都可能为数值型，并且气泡图时需要指定气泡大小，所以scatter型图表设置为：
[
& & {
& && &&&value : [10, 25, 5]& &&&//[xValue, yValue, rValue]，数组内依次为横值，纵值，大小(可选)
& & },
& & [12, 15, 1]
& & ...
]复制代码当图表类型为K线图时，其数值设置比较特殊，他的数值内容为长度为4的数组，分别代表[开盘价，收盘价，最低值，最高值]
[
& & {
& && &&&value : [48.35, 90.1] // // 开盘，收盘，最低，最高
& & },
& & [10.9, 50.63],
& & ...
]复制代码当图表类型为饼图时，需要说明每部分数据的名称name，可设置选中状态，所以设置为：
[
& & {
& && &&&value : 12，
& && &&&name : 'apple'& && && & //每部分数据的名称
& & },
& & ...
]复制代码当图表类型为地图时，需要说明每部分数据对应的省份，可设置选中状态，所以设置为：
[
& & {
& && &&&name: '北京',
& && &&&value: 1234,
& && &&&selected: true
& & },
& & {
& && &&&name: '天津',
& && &&&value: 321
& & },
& & ...
]复制代码
series.markPoint
系列中的数据标注内容
36.png (56.84 KB, 下载次数: 0)
09:51 上传
series.markPoint.data
标注的数据内容数组，最直接的数据项可直接指定标注位置（x，y）以及相关名称（name）和值（value），在饼图、雷达图、力导、和弦图中基本如下:
data : [
& & {name: '标注1', value: 100, x: 50, y: 20},
& & {name: '标注2', value: 200, x: 150, y: 120},
& & ...
]复制代码在存在直角坐标系的图表如折线、柱形、K线、散点图中，除了通过直接指定位置外，如果希望标注基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下：
data : [
& & {name: '标注1', value: 100, xAxis: 1, yAxis: 20},& && &// 当xAxis为类目轴时，数值1会被理解为类目轴的index
& & {name: '标注2', value: 100, xAxis: '周三', yAxis: 20}, // 当xAxis为类目轴时，字符串'周三'会被理解为与类目轴的文本进行匹配
& & {name: '标注3', value: 200, xAxis: 10, yAxis: 20},& &&&// 当xAxis或yAxis为数值轴时，不管传入是什么，都被理解为数值后做空间位置换算
& & ...
]复制代码更为实用的，在折线、柱形、散点图中，可以直接使用如下几个开箱即用的特殊点标注
data : [
& & {type : 'max', name: '自定义名字'},& & // 最大值
& & {type : 'min', name: '自定义名字'}& &&&// 最小值
]复制代码标注数据比较特殊也最为常用的地图上，除了直接位置定位外，如果希望基于地理坐标标注，并且能够随地图漫游缩放，需要为markPoint提供一份geoCoord，如下
data : [
& & {name: '北京', value: 100},
& & {name: '上海', value: 200},
& & ...
],
geoCoord : {
& & &北京&:[116.46,39.92],& && && &&&// 支持数组[经度，维度]
& & &上海&: {x: 121.48, y: 31.22},& &// 支持对象{x:经度,y:纬度}
& & ...
}复制代码
series.markLine
系列中的数据标线内容
37.png (87.44 KB, 下载次数: 0)
09:51 上传
series.markLine.data
标线的数据内容数组，最直接的数据项可直接指定标线起始和结束位置（x，y）以及相关名称（name）和值（value），在饼图、雷达图、力导、和弦图中基本如下:
data : [
& & [
& && &&&{name: '标线1起点', value: 100, x: 50, y: 20},
& && &&&{name: '标线1终点', x: 150, y: 120}
& & ],
& & [
& && &&&{name: '标线2起点', value: 200, x: 30, y: 80},
& && &&&{name: '标线2终点', x: 270, y: 190}
& & ],
& & ...
]复制代码在存在直角坐标系的图表如折线、柱形、K线、散点图中，除了通过直接指定位置外，如果希望标线基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下：
data : [
& & [
& && &&&{name: '标线1起点', value: 100, xAxis: 1, yAxis: 20},& && &// 当xAxis为类目轴时，数值1会被理解为类目轴的index，通过xAxis:-1|MAXNUMBER可以让线到达grid边缘
& && &&&{name: '标线1终点', xAxis: '周三', yAxis: 20},& && && && & // 当xAxis为类目轴时，字符串'周三'会被理解为与类目轴的文本进行匹配
& & ],
& & [
& && &&&{name: '标线2起点', value: 200, xAxis: 10, yAxis: 20},& &&&// 当xAxis或yAxis为数值轴时，不管传入是什么，都被理解为数值后做空间位置换算
& && &&&{name: '标线2终点', xAxis: 270, yAxis: 190}
& & ],
& & ...
]复制代码更为实用的，在折线、柱形、散点图中，可以直接使用如下几个开箱即用的特殊点作为标线类型
data : [
& & {type : 'max', name: '自定义名字'},& & // 最大值水平线或垂直线
& & {type : 'min', name: '自定义名字'},& & // 最小值水平线或垂直线
& & {type : 'average', name: '自定义名字'},// 平均值水平线或垂直线
& & // 最小值指向最大值的连线
& & [
& && &&&{type : 'min', name: '自定义名字'},
& && &&&{type : 'max', name: '自定义名字'}
& & ],
& & // 散点图中存在两个数值型坐标，默认用纵轴值计算特殊点，可以通过valueIndex:0指定为横轴特殊点
& & {type : 'max', name: '自定义名字', valueIndex:0}
]复制代码标线数据比较特殊也最为常用的地图上，除了直接位置定位外，如果希望基于地理坐标标线，并且能够随地图漫游缩放，需要为markLine提供一份geoCoord，如下
data : [
& & [
& && &&&{name: '北京', value: 100},
& && &&&{name:'上海'}
& & ],
& & [
& && &&&{name: '北京', value: 100},
& && &&&{name:'广州'}
& & ],
& & ...
],
geoCoord : {
& & &北京&:[116.46,39.92],& && && &&&// 支持数组[经度，维度]
& & &广州&:[113.23,23.16],
& & &上海&: {x: 121.48, y: 31.22},& &// 支持对象{x:经度,y:纬度}
& & ...
}复制代码
图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：
itemStyle: {
& & normal: {
& && &&&...
& & },
& & emphasis: {
& && &&&...
& & }
}复制代码其中normal和emphasis属性为对象，其包含：
38.png (70.12 KB, 下载次数: 0)
09:51 上传
其中标签label属性为对象，其包含：
39.png (44.75 KB, 下载次数: 0)
09:51 上传
其中标签视觉引导线labelLine属性为对象，其包含：
40.png (13.41 KB, 下载次数: 0)
09:51 上传
通过有效设置itemStyle的normal和emphasis选项可实现个性化的显示策略，比如希望饼图文字标签默认隐藏，并在鼠标悬浮时通过一条红色的视觉引导线显示在饼图外部区域，可以如下设置：
itemStyle: {
& & normal: {
& && &&&label: {
& && && && &show: false
& && &&&}
& && &&&labelLine: {
& && && && &show: false
& && &&&}
& & } ,
& & emphasis: {
& && &&&label: {
& && && && &show: true,
& && && && &position: 'outer'
& && &&&}
& && &&&labelLine: {
& && && && &show: true,
& && && && &lineStyle: {
& && && && && & color: 'red'
& && && && &}
& && &&&}
& & }
}复制代码高度个性化：
折线图 try this >>， 柱状图 try this >>， K线图 try this >>， 散点图try this >>， 饼图 try this >>， 和弦图 try this >>， 力导向布局 try this >>， 地图 try this >>， 仪表盘 try this >>， 漏斗图 try this >>
线条（线段）样式
41.png (24.04 KB, 下载次数: 0)
09:51 上传
区域填充样式
42.png (6.37 KB, 下载次数: 0)
09:51 上传
chordStyle
和弦图中的弦样式
43.png (14.12 KB, 下载次数: 0)
09:51 上传
力导向图中的节点样式
44.png (8.4 KB, 下载次数: 0)
09:51 上传
力导向图中的边样式
45.png (8.56 KB, 下载次数: 0)
09:51 上传
46.png (21.97 KB, 下载次数: 0)
09:51 上传
loadingOption
过渡显示，loading（读取中）的选项。try this >>
47.png (26.67 KB, 下载次数: 0)
09:51 上传
noDataLoadingOption
无数据提示，loading动画选项。
48.png (26.57 KB, 下载次数: 0)
09:51 上传
backgroundColor
{color} null，全图默认背景，默认为null，同'rgba(0,0,0,0)'
& & '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
& & '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
& & '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
& & '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
]，默认颜色序列，循环使用
symbolList
& & 'circle', 'rectangle', 'triangle', 'diamond',
& & 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
]，默认标志图形类型列表，循环使用
renderAsImage
{boolean | string} false，非IE8-支持渲染为图片，可设为true或指定图片格式（png | jpeg），渲染为图片后实例依然可用（如setOption，resize等），但各种交互失效
calculable
{boolean} false，是否启用拖拽重计算特性，默认关闭
calculableColor
{color} 'rgba(255,165,0,0.6)'，拖拽重计算提示边框颜色
calculableHolderColor
{color} '#ccc'，可计算占位提示颜色
nameConnector
{string} ' & '，数据合并名字间连接符
valueConnector
{string} ' : '，数据合并名字与数值间连接符
{boolean} true，是否启用图表初始化动画，默认开启，建议IE8-关闭
addDataAnimation
{boolean} true，是否启用动态数据接口动画效果，默认开启，建议IE8-关闭
animationThreshold
{number} 2500，动画元素阀值，产生的图形原素超过2500不出动画，建议IE8-关闭
animationDuration
{number} 2000，进入动画时长，单位ms
animationDurationUpdate
{number} 500，更新动画时长，单位ms
animationEasing
{string} 'BounceOut'，主元素的缓动效果，详见zrender.animation.easing，可选有：
'QuadraticIn', 'QuadraticOut', 'QuadraticInOut',
'CubicIn', 'CubicOut', 'CubicInOut',
'QuarticIn', 'QuarticOut', 'QuarticInOut',
'QuinticIn', 'QuinticOut', 'QuinticInOut',
'SinusoidalIn', 'SinusoidalOut', 'SinusoidalInOut',
'ExponentialIn', 'ExponentialOut', 'ExponentialInOut',
'CircularIn', 'CircularOut', 'CircularInOut',
'ElasticIn', 'ElasticOut', 'ElasticInOut',
'BackIn', 'BackOut', 'BackInOut',
'BounceIn', 'BounceOut', 'BounceInOut'
图数据表示
和弦图和力导向图等图的数据表示需要一个图的数据结构，Echarts中可以使用nodes或者data来表示节点数据，用links或者邻接矩阵matrix表示边, 对于每个节点可以通过一个额外的category配置节点的分类。
categories
49.png (16 KB, 下载次数: 0)
09:51 上传
nodes(data)
50.png (25.87 KB, 下载次数: 0)
09:51 上传
51.png (10.56 KB, 下载次数: 0)
09:51 上传
关系数据，用二维数组表示，项 [j] 的数值表示 i 到 j 的关系数据
多级控制设计
简单的说，你可以通过这三级满足不同level的定制和个性化需求：
通过 option.* 设置全局统一配置；通过 option.series.* 设置特定系列特殊配置，其优先级高于 option 内的同名配置；通过 option.series.data.* 设置特定数据项的特殊配置，最高优先级；
multiControl.jpg (31.9 KB, 下载次数: 0)
09:08 上传
附录：地图扩展
支持百度地图作为地图源叠加echarts可视化功能， 文档， 例子1， 例子2， by 杨骥
支持标准GeoJson动态扩展地图类型，try HK 》 USA 》
// step1: 找到目标地区的geoJson数据文件，如HK_geo.json
// step2: 在require('echarts/util/mapData/params').params中命名你的地图类型，如HK
// step3: 命名赋值为对象{}, 实现接口方法getGeoJson，通过callback返回目标地区geoJson数据文件
require('echarts/util/mapData/params').params.HK = {
& & getGeoJson: function (callback) {
& && &&&$.getJSON('geoJson/HK_geo.json',callback);
& & }
}
// step3*: 对于数据地图类型，一般不需要特殊的投射算法，ECharts统一使用了简化的投射算法，因而对于个别地区可能需要人为调整，可以通过specialArea指定个别地区安的经纬度坐标和区间大小，如
require('echarts/util/mapData/params').params.USA = {
& & getGeoJson: function (callback) {
& && &&&$.getJSON('geoJson/USA_geo.json', callback);
& & },
& & specialArea : {
& && &&&Alaska : {& && && && &&&// 把阿拉斯加移到美国主大陆左下方
& && && && &left : -131,& && &&&// 安放位置起始点：西经113度
& && && && &top : 31,& && && &&&// 安放位置起始点：北纬31度
& && && && &width : 15,& && && &// 区间大小宽高不大于15度
& && && && &height : 15
& && &&&},
& && &&&Hawaii : {
& && && && &left : -112,& && &&&// 夏威夷
& && && && &top : 29,
& && && && &width : 5,
& && && && &height : 5
& && &&&},
& && &&&'Puerto Rico' : {& && & // 波多黎各
& && && && &left : -76,
& && && && &top : 26,
& && && && &width : 2,
& && && && &height : 2
& && &&&}
& & }
}
// step4: 已经有这个地图类型了，可以在option中使用了
option.series = [
& && &&&{
& && && && &type: 'map',
& && && && &mapType: 'HK', // 自定义扩展图表类型
& && && && &...
& && && &}
]复制代码附录：组件和图表的实例接口
为了实现更高级的功能和需求定制，ECharts团队做了个艰难的决定，开放组件和图表实例接口。这些组件和图表实例都被挂载到init所得到的实例上（如myChart），分别存放在chart和component下，如可以通过myChart.chart.map得到当前地图实例并可以读取并调用里面的各种属性和方法。
【重要】请注意，ECharts接口基于数据驱动设计，这些实例并不为开放准备，虽然你可以无限制的访问，甚至动态的覆盖重写，但这可能会导致图表无法正常工作或随着版本升级无法得到兼容，所以我们仅列出如下部分方法和属性作为使用上的参考（或者说限制），我们会尽最大的努力去保证这些方法或属性的稳定和向下兼容，并且保证在出现无法兼容的更新时在changelog上通告。如果你使用了并不出现在下述文档中的方法或属性将得不到这份保证，请谅解。
组件实例接口
ECharts包含组件有：timeline、title、legend、dataRange、toolbox、tooltip、dataZoom、grid、xAxis、yAxis、polar
时间轴，每个图表最多仅有一个时间轴。可使用的属性和方法有：
52.png (32.6 KB, 下载次数: 0)
09:51 上传
提示框，鼠标悬浮交互时的信息提示，每个图表最多仅有一个提示框。可使用的属性和方法有：
53.png (19.44 KB, 下载次数: 0)
09:51 上传
图例，每个图表最多仅有一个图例。可使用的属性和方法有：
54.png (43.52 KB, 下载次数: 0)
09:51 上传
值域选择，每个图表最多仅有一个值域控件。可使用的属性和方法有：
55.png (11.33 KB, 下载次数: 0)
09:51 上传
数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。可使用的属性和方法有
99.png (18.93 KB, 下载次数: 0)
13:28 上传
直角坐标系内绘图网格。可使用的属性和方法有：
98.png (49.96 KB, 下载次数: 0)
14:05 上传
xAxis/yAxis
横纵坐标轴。可使用的属性和方法有：
77.png (13.03 KB, 下载次数: 0)
13:58 上传
categoryAxis
类目轴。可使用的属性和方法有：
59.png (32.66 KB, 下载次数: 0)
09:51 上传
数值轴。可使用的属性和方法有：
60.png (16.03 KB, 下载次数: 0)
09:51 上传
极坐标。可使用的属性和方法有：
61.png (12.93 KB, 下载次数: 0)
09:51 上传
图表实例接口
ECharts支持的图表有：line、bar、scatter、k、pie、radar、chord、force、map
地图。可使用的属性和方法有：
62.png (19.62 KB, 下载次数: 0)
09:51 上传
附录：一个直观的事例
查看更多实例 example，或者使用这个demo 或 ECharts单一文件引入作为你的模板
// 图表实例化------------------
// srcipt标签式引入
var myChart = echarts.init(document.getElementById('main'));
// 过渡---------------------
myChart.showLoading({
& & text: '正在努力的读取数据中...',& & //loading话术
});
// ajax getting data...............
// ajax callback
myChart.hideLoading();
// 图表使用-------------------
var option = {
& & legend: {& && && && && && && && && && && &&&// 图例配置
& && &&&padding: 5,& && && && && && && && && &&&// 图例内边距，单位px，默认上下左右内边距为5
& && &&&itemGap: 10,& && && && && && && && && & // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
& && &&&data: ['ios', 'android']
& & },
& & tooltip: {& && && && && && && && && && && & // 气泡提示配置
& && &&&trigger: 'item',& && && && && && && && &// 触发类型，默认数据触发，可选为：'axis'
& & },
& & xAxis: [& && && && && && && && && && && && &// 直角坐标系中横轴数组
& && &&&{
& && && && &type: 'category',& && && && && && & // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
& && && && &data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
& && &&&}
& & ],
& & yAxis: [& && && && && && && && && && && && &// 直角坐标系中纵轴数组
& && &&&{
& && && && &type: 'value',& && && && && && && & // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
& && && && &boundaryGap: [0.1, 0.1],& && && && &// 坐标轴两端空白策略，数组内数值代表百分比
& && && && &splitNumber: 4& && && && && && && & // 数值轴用，分割段数，默认为5
& && &&&}
& & ],
& & series: [
& && &&&{
& && && && &name: 'ios',& && && && && && && && &// 系列名称
& && && && &type: 'line',& && && && && && && &&&// 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
& && && && &data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
& && &&&},
& && &&&{
& && && && &name: 'android',& && && && && && &&&// 系列名称
& && && && &type: 'line',& && && && && && && &&&// 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
& && && && &data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
& && &&&}
& & ]
};
myChart.setOption(option);
// 增加些数据------------------
option.legend.data.push('win');
option.series.push({
& && &&&name: 'win',& && && && && && && && && & // 系列名称
& && &&&type: 'line',& && && && && && && && && &// 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
& && &&&data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);
// 图表清空-------------------
myChart.clear();
// 图表释放-------------------
myChart.dispose();复制代码
电话：010-
地址：北京市海淀区北清路68号
移动客户端下载
微信公众号：yonyouudn
扫描右侧二维码关注我们
专注企业互联网的技术社区
版权所有：用友网络科技股份有限公司82041
京公网网备安4
Powered by Discuz!}