ECharts-Javascript的图表库推荐
来源:互联网 发布:加入软件免费下载 编辑:程序博客网 时间:2024/05/16 14:06
From: http://echarts.baidu.com/doc/doc.html
简介
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。
名词解析
基本名词
图表名词
图表类型
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表:
单图表类型:line
单图表类型:bar
单图表类型:scatter
单图表类型:k
单图表类型:pie
单图表类型:radar
单图表类型:chord
单图表类型:force
单图表类型:map
单图表类型:gauge
单图表类型:funnel
单图表类型:eventRiver
单图表类型:treemap
单图表类型:venn
引入ECharts
echarts提供多种引入方式,请根据你的项目类型选择合适的方式:
模块化包引入
如果你熟悉模块化开发,你的项目本身就是模块化且遵循AMD规范的,那引入echarts将很简单,使用一个符合AMD规范的模块加载器,如esl.js,只需要配置好packages路径指向src即可,你将享受到图表的按需加载等最大的灵活性,由于echarts依赖底层zrender,你需要同时下载zrender到本地,可参考demo,你需要配置如下。
需要注意的是,包引入提供了开发阶段最大的灵活性,但并不适合直接上线,减少请求的文件数量是前端性能优化中最基本但很重要的规则,务必在上线时做文件的连接压缩。
//from echarts examplerequire.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(文件夹) : 经过合并、压缩的单文件
- echarts.js : 这是包含AMD加载器的echarts主文件,需要通过script最先引入
- chart(文件夹) : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件,根据应用需求可实现图表类型按需加载
- echarts-line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)
- echarts-bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)
- echarts-scatter.js : 散点图
- echarts-k.js : K线图
- echarts-pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)
- echarts-radar.js : 雷达图
- echarts-map.js : 地图
- echarts-force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)
- echarts-chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)
- echarts-funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)
- echarts-gauge.js : 仪表盘
- echarts-eventRiver.js : 事件河流图
- 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>
可以直接引入的单文件如下:
- 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方法说明如下:
{string | Object =} theme初始化接口,返回ECharts实例,其中dom为图表所在节点,theme为可选的主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象。如:
var myCharts = echarts.init(document.getElementById('main'), 'macarons');
图表实例可用方法见方法
引入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({...});
熟悉模块化的你可以跳过了下面代码了
// 不习惯模块化的你当然可以var echarts;require(['echarts'], function (ec){ echarts = ec;});// 是的,把echarts加载后保存起来作为命名空间使用
实例方法
实例指的就是接口init()返回的对象,即上述代码中的“myChart”,非get接口均返回自身self支持链式调用
{boolean=}notMerge万能接口,配置图表实例任何可配置选项(详见option),多次调用时option选项默认是合并(merge)的,merge的设计可以让setOption很方便的成为更新任何属性的万能方法,比如你仅需要改title文字,则仅需要:
setOption({title : {text : '新标题'}});
如果不需要,可以通过notMerger参数为true阻止与上次option的合并,如多次setOption间数据改变、长度不一致等的场景。
2.0.0起支持timeline组件,option中包含timeline(详见timeline)时每一个独立的option应该放置到命名为options的数组内,如
myCharts.setOption({ timeline : {...}, options : [ { // option1 title : {...}, series : [...] }, {...}, // option2 ... ]});{Object}getOption{void}返回内部持有的当前显示option克隆(拷贝)。{self} setSeries{Array} series,
{boolean=}notMerge数据接口,驱动图表生成的数据内容(详见series),效果等同调用 setOption({series : {...}}, notMerge){Object}getSeries{void}返回内部持有的当前显示series克隆(拷贝),效果同 getOption().series{self}addData单组数据:
{number} seriesIdx
{number | Object}data
{boolean=} isHead
{boolean=}dataGrow
{string=}additionData
多组数据添加:
{Array} params动态数据接口,try this (Line & Bar) » try this (Scatter & K) » try this (Pie & Radar) »
seriesIdx 系列索引
data 增加数据
isHead 是否队头加入,默认,不指定或false时为队尾插入
dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据
additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow
多组数据添加时参数为:
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]{self}addMarkPoint{number} seriesIdx
{Object} markData新增标注接口,其中
seriesIdx 系列索引
markData [标注]对象,同series.markPoint,支持多个{self}addMarkLine{number} seriesIdx
{Object} markData新增标线接口,其中
seriesIdx 系列索引
markData [标线]对象,同series.markLine,支持多个{self}delMarkPoint{number} seriesIdx
{string} markName删除单个标注接口,其中
seriesIdx 系列索引
markName [标注]名称{self}delMarkLine{number} seriesIdx
{string} markName删除单个标线接口,其中
seriesIdx 系列索引
markName [标线]名称,已构建的标线名称默认为markLine数据中起始点的name,如果同时终点也有name属性,如地图标线,则标线名称等于“nameStart > nameEnd”,如markLine的data为
[{name:'北京', value:100}, {name:'上海'}]
则删除该标线时传入的markName为 "北京 > 上海"{self} on{string} eventName,
{Function}eventListener事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用,当前版本支持事件有:
-----------------------基础事件-----------------------
REFRESH(刷新),
RESTORE(还原),
RESIZE(显示空间变化),
CLICK(点击),
DBLCLICK(双击),
HOVER(悬浮),
MOUSEOUT(鼠标离开数据图形),
---------------------交互逻辑事件--------------------
DATA_CHANGED(数据修改,如拖拽重计算),
DATA_VIEW_CHANGED(数据视图修改),
MAGIC_TYPE_CHANGED(动态类型切换),
TIMELINE_CHANGED(时间轴变化),
DATA_ZOOM(数据区域缩放),
DATA_RANGE(值域漫游),
DATA_RANGE_SELECTED(值域开关选择),
DATA_RANGE_HOVERLINK(值域漫游hover),
LEGEND_SELECTED(图例开关选择),
LEGEND_HOVERLINK(图例hover),
MAP_ROAM(地图漫游),
MAP_SELECTED(地图选择),
PIE_SELECTED(饼图选择),
FORCE_LAYOUT_END(力导向布局结束)
事件调试 »{self} un{string} eventName,
{Function}eventListener事件解绑定{self}setTheme{string | Object}theme设置主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象{self} connect{ECharts | Array <ECharts>}connectTarget多图联动,传入联动目标为EChart实例,支持数组。多图联动支持直角系下tooltip联动,保存图片的自动拼接,同时支持的联动事件有:
REFRESH,RESTORE,MAGIC_TYPE_CHANGED
DATA_ZOOM,DATA_RANGE,LEGEND_SELECTED
多图联动 »{self}disConnect{ECharts | Array <ECharts>}connectTarget解除已连结的多图联动{self}showLoading{Object}loadingOption过渡控制(详见loadingOption),显示loading(读取中) try this »{self}hideLoading{void}过渡控制,隐藏loading(读取中){ZRender}getZrender{void}获取当前图表所用ZRender实例,可用于添加额外图形或进行深度定制,zrender接口详见ZRender{string}getDataURL{string=} imgType获取当前图表的Base64图片dataURL,IE8-不支持,imgType 图片类型,支持png|jpeg,默认为png{Dom}getImage{string=} imgType获取一个当前图表的img,imgType 图片类型,支持png|jpeg,默认为png{self} resize{void}ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道,使用方可以根据自己的需求绑定关心的事件,主动调用resize达到自适应的效果,常见如window.onresize = myChart.resize。{self} refresh{void}刷新图表,图例选择、数据区域缩放,拖拽状态均保持。{self} restore{void}还原图表,各种状态均被清除,还原为最初展现时的状态。{self} clear{void}清空绘画内容,清空后实例可用{void} dispose{void}释放图表实例,释放后实例不再可用
选项
option
图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项
timeline
时间轴,每个图表最多仅有一个时间轴控件,try bar »、scatter »、pie »、map »
支持百分比(字符串),如'50%'(显示区域一半的宽度){number} height50时间轴高度,数值单位px,支持百分比(字符串),如'50%'(显示区域一半的高度){color}backgroundColor'rgba(0,0,0,0)'背景颜色,默认透明。{number}borderWidth0边框线宽{color}borderColor'#ccc'边框颜色。{number | Array}padding5内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图{string}controlPosition'left'播放控制器位置,可选为:'left' | 'right' | 'none'{boolean}autoPlayfalse是否自动播放{boolean} looptrue是否循环播放{number}playInterval2000播放时间间隔,单位ms{Object} lineStyle
{ color: '#666', width: 1, type: 'dashed'}时间轴轴线样式,lineStyle控制线条样式,(详见lineStyle){Object} label
{ show: true, interval: 'auto', rotate: 0, formatter: null, textStyle: { color: '#333' }}时间轴标签文本
show : 是否显示
interval : 挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显示) | {number}
rotate : 旋转角度,默认为0,不旋转,正值为逆时针,负值为顺时针,可选为:-90 ~ 90
formatter : 间隔名称格式器:{string}(Template) | {Function}
textStyle : 文字样式(详见textStyle){Object}checkpointStyle
{ symbol : 'auto', symbolSize : 'auto', color : 'auto', borderColor : 'auto', borderWidth : 'auto', label: { show: false, textStyle: { color: 'auto' } }}时间轴当前点
symbol : 当前点symbol,默认随轴上的symbol
symbolSize : 当前点symbol大小,默认随轴上symbol大小
color : 当前点symbol颜色,默认为随当前点颜色,可指定具体颜色,如无则为'#1e90ff'
borderColor : 当前点symbol边线颜色
borderWidth : 当前点symbol边线宽度
label同上{Object}controlStyle
{ itemSize: 15, itemGap: 5, normal : { color : '#333' }, emphasis : { color : '#1e90ff' }}时间轴控制器样式,可指定itemSize按钮大小,itemGap按钮间隔,normal.color正常和emphasis.color高亮颜色{string} symbol'emptyDiamond'轴点symbol,同serie.symbol{number}symbolSize4轴点symbol,同serie.symbolSize{number}currentIndex0当前索引位置,对应options数组,用于指定显示特定系列{Array} data[]时间轴列表,同时也是轴label内容
title
标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题。
{ fontSize: 18, fontWeight: 'bolder', color: '#333'}主标题文本样式(详见textStyle){Object}subtextStyle
{ color: '#aaa'}副标题文本样式(详见textStyle)
toolbox
工具箱,每个图表最多仅有一个工具箱。try this »
{ mark : { show : false, title : { mark : '辅助线开关', markUndo : '删除辅助线', markClear : '清空辅助线' }, lineStyle : { width : 2, color : '#1e90ff', type : 'dashed' } }, dataZoom : { show : false, title : { dataZoom : '区域缩放', dataZoomReset : '区域缩放后退' } }, dataView : { show : false, title : '数据视图', readOnly: false, lang: ['数据视图', '关闭', '刷新'] }, magicType: { show : false, title : { line : '折线图切换', bar : '柱形图切换', stack : '堆积', tiled : '平铺', force: '力导向布局图切换', chord: '和弦图切换', pie: '饼图切换', funnel: '漏斗图切换' }, option: { // line: {...}, // bar: {...}, // stack: {...}, // tiled: {...}, // force: {...}, // chord: {...}, // pie: {...}, // funnel: {...} }, type : [] }, restore : { show : false, title : '还原' }, saveAsImage : { show : false, title : '保存为图片', type : 'png', lang : ['点击保存'] }}启用功能,目前支持feature见下,工具箱自定义功能回调处理,见try this »
- mark,辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部,可设置更多属性
- 可传入lineStyle(详见lineStyle)控制线条样式
- dataZoom,框选区域缩放,自动与存在的dataZoom控件同步,上图icon左数4/5,分别是启用,缩放后退
- dataView,数据视图,上图icon左数6,打开数据视图,可设置更多属性
- {boolean=} readOnly 默认数据视图为只读,可指定readOnly为false打开编辑功能
- {Function=} optionToContent 自主编排数据视图的显示内容
- {Function=} contentToOption 当数据视图readOnly为false时,会出现刷新按钮,如果是自主编排的显示内容,如何翻转也请自理
- {Array=} lang 数据视图上有三个话术,默认是['数据视图', '关闭', '刷新'],如需改写,可自定义
- magicType,动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换,上图icon左数6~14,分别是切换为堆积,切换为平铺,切换折线图,切换柱形图,切换为力导向布局图,切换为和弦图,切换为饼图,切换为漏斗图
- {Array} type ['line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie', 'funnel']
- {Object=} option 可选,可传入切换是动态修改的配置,将复写series内的数组项
- restore,还原,复位原始图表,上图icon右数2
- saveAsImage,保存图片(IE8-不支持),上图icon最右,可设置更多属性
- {string=} type 默认保存图片类型为'png',需改为'jpeg'
- {string=} name 指定图片名称,如不指定,则用图表title标题,如无title标题则图片名称默认为“ECharts”
- {string=} lang 非IE浏览器支持点击下载,有保存话术,默认是“点击保存”,可修改
tooltip
提示框,鼠标悬浮交互时的信息提示。try this »
可选为:true(显示) | false(隐藏){string} trigger'item'触发类型,默认数据触发,见下图,可选为:'item' | 'axis'{Array | Function}positionnull位置指定,传入{Array},如[x, y], 固定位置[x, y];传入{Function},如function([x, y]) {return [newX,newY]},默认显示坐标为输入参数,用户指定的新坐标为输出返回。{string | Function}formatternull内容格式器:{string}(Template) | {Function},支持异步回调见表格下方{string | Function}islandFormatter'{a} < br/>{b} : {c}'拖拽重计算独有,数据孤岛内容格式器:{string}(Template) |{Function},见表格下方{number}showDelay20显示延迟,添加显示延迟可以避免频繁切换,特别是在详情内容需要异步获取的场景,单位ms{number}hideDelay100隐藏延迟,单位ms{number}transitionDuration0.4动画变换时长,单位s,如果你希望tooltip的跟随实时响应,showDelay设置为0是关键,同时transitionDuration设0也会有交互体验上的差别。{boolean}enterablefalse鼠标是否可进入详情气泡中,默认为false,如需详情内交互,如添加链接,按钮,可设置为true。{color}backgroundColor'rgba(0,0,0,0.7)'提示背景颜色,默认为透明度为0.7的黑色{string}borderColor'#333'提示边框颜色{number}borderRadius4提示边框圆角,单位px,默认为4{number}borderWidth0提示边框线宽,单位px,默认为0(无边框){number | Array}padding5提示内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css{Object}axisPointer
{ type: 'line', lineStyle: { color: '#48b', width: 2, type: 'solid' }, crossStyle: { color: '#1e90ff', width: 1, type: 'dashed' }, shadowStyle: { color: 'rgba(150,150,150,0.3)', width: 'auto', type: 'default' }}坐标轴指示器,默认type为line,可选为:'line' | 'cross' | 'shadow' | 'none'(无),指定type后对应style生效,见下
lineStyle设置直线指示器(详见lineStyle),
crossStyle设置十字准星指示器(详见lineStyle),
shadowStyle设置阴影指示器(详见areaStyle),areaStyle.size默认为'auto'自动计算,可指定具体宽度{Object} textStyle{ color:'#fff' }文本样式,默认为白色字体(详见textStyle)
内容格式器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)
- <Array> params : 数组内容同模板变量,
触发类型:
legend
图例,每个图表最多仅有一个图例。try this »
使用根据该值索引series中同名系列所用的图表类型和itemStyle,如果索引不到,该item将默认为没启用状态。
如需个性化图例文字样式,可把数组项改为{Object},指定文本样式和个性化图例icon,格式为
{
name : {string},
textStyle : {Object},
icon : {string}
}
dataRange
值域选择,每个图表最多仅有一个值域控件。try this »
dataZoom
数据区域缩放。与toolbox.feature.dataZoom同步,仅对直角坐标系图表有效。try this »
roamController
缩放漫游组件,仅对地图有效。try this »
当同一图表内同时呈现多个地图时,可以单独指定所需控制地图类型,如:{ china: false, '北京': true}
grid
直角坐标系内绘图网格
支持百分比(字符串),如'50%'(显示区域一半的宽度){number} height自适应直角坐标系内绘图网格(不含坐标轴)高度,默认为总高度 - y - y2,数值单位px,指定height后将忽略y2,见下图。
支持百分比(字符串),如'50%'(显示区域一半的高度){color}backgroundColor'rgba(0,0,0,0)'背景颜色,默认透明。{number}borderWidth1边框线宽{color}borderColor'#ccc'边框颜色。
xAxis
直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数组。最多同时存在2条横轴,单条横轴时可指定安放于grid的底部(默认)或顶部,2条同时存在时位置互斥,默认第一条安放于底部,第二条安放于顶部。
坐标轴有三种类型,类目型、数值型和时间型(区别详见axis),横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型,具体参数详见axis。
yAxis
直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数组。最多同时存在2条纵轴,单条纵轴时可指定安放于grid的左侧(默认)或右侧,2条同时存在时位置互斥,默认第一条安放于左侧,第二条安放于右侧。
坐标轴有三种类型,类目型、数值型和时间型(区别详见axis),纵轴通常为数值型,但条形图时则纵轴为类目型,具体参数详见axis。
axis
坐标轴有三种类型,类目型、数值型和时间型,他们的区别在于:
- 类目型:需要指定类目列表,坐标轴内有且仅有这些指定类目坐标
- 数值型:需要指定数值区间,不指定时则自定计算数值范围,坐标轴内包含数值区间内容全部坐标
- 时间型:时间型坐标轴用法同数值型,只是目标处理和格式化显示时会自动转变为时间,并且随着时间跨度的不同自动切换需要显示的时间粒度
下面是坐标轴的全部选项,其中个别选项仅在个别类型时有效,请注意适用类型。try this »
boundaryGap端空白策略
scale策略
axis属性说明
axis.axisLine
坐标轴线,默认显示且带如下样式:
{ color: '#48b', width: 2, type: 'solid'}通用属性lineStyle控制线条样式,(详见lineStyle)
axis.axisTick
坐标轴小标记,数值轴和时间轴默认不显示,类目轴默认显示,默认样式见下:
true(类目轴)通用是否显示,默认为false,设为true后下面为默认样式{string | number | function}interval'auto'类目型小标记显示挑选间隔,默认为'auto',可选为:
'auto'(随axisLabel,自动隐藏显示不下的) | 0(全部显示) |
{number}(用户指定选择间隔)
{function}函数回调,传递参数[index,data[index]],返回true显示,返回false隐藏{boolean} onGapnull类目型小标记是否显示为间隔,默认等于boundaryGap{boolean} insidefalse通用小标记是否显示为在grid内部,默认在外部{number} length5通用属性length控制线长{Object} lineStyle
{ color: '#333', width: 1}通用属性lineStyle控制线条样式,(详见lineStyle)
axis.axisLabel
坐标轴文本标签选项
'auto'(自动隐藏显示不下的) | 0(全部显示) |
{number}(用户指定选择间隔)
{function}函数回调,传递参数[index,data[index]],返回true显示,返回false隐藏{number} rotate0通用标签旋转角度,默认为0,不旋转,正值为逆时针,负值为顺时针,可选为:-90 ~ 90{number} margin8通用坐标轴文本标签与坐标轴的间距,默认为8,单位px{boolean} clickablefalse通用坐标轴文本标签是否可点击{string | Function}formatternull通用间隔名称格式器:{string}(Template) | {Function}{Object} textStyle
{ color: '#333'}通用文本样式(详见textStyle),其中当坐标轴为数值型和时间型时,color接受方法回调,实现个性化的颜色定义,support #226 »
间隔名称格式器formatter:
- {string},模板(Template),其变量为:
- {value}: 内容或值
- {Function},传递参数同模板变量:
- eg:function (value){return "星期" + "日一二三四五六".charAt(value);'}
axis.splitLine
分隔线,默认显示且带如下样式:
{ color: ['#ccc'], width: 1, type: 'solid'}通用属性lineStyle控制线条样式,(详见lineStyle)
axis.splitArea
分隔区域,默认不显示:
{ color: [ 'rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)' ]}通用属性areaStyle(详见areaStyle)控制区域样式,颜色数组实现间隔变换。
axis.data
类目型坐标轴文本标签数组,指定label内容。 数组项通常为文本,'\n'指定换行,如:
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ..., 'Dec']
当需要对个别标签进行个性化定义时,数组项可用对象,接受textStyle设置个性化标签,如:
[ 'Jav', 'Feb', 'Mar', { value:'Apr', //文本内容,如指定间隔名称格式器formatter,则这个值将被作为模板变量值或参数传入 textStyle:{ //详见textStyle color : 'red' ... } }, 'May', '...']
polar
极坐标:
{ show: true, formatter: null, textStyle: { color:#333 }}坐标轴名称{Array}boundaryGap[0, 0]数值轴两端空白策略,数组内数值代表百分比,[原始数据最小值与最终最小值之间的差额,原始数据最大值与最终最大值之间的差额]{boolean}scalefalse脱离0值比例,放大聚焦到最终_min,_max区间{Object}axisLine{show : true}坐标轴线,默认显示,属性show控制显示与否,属性lineStyle(详见lineStyle)控制线条样式{Object}axisLabel{show : false}坐标轴文本标签,详见axis.axisLabel{Object}splitLine{show : true}分隔线,默认显示,属性show控制显示与否,属性lineStyle(详见lineStyle)控制线条样式{Object}splitArea{show : true}分隔区域,默认不显示,属性show控制显示与否,属性areaStyle(详见areaStyle)控制区域样式{String} type'polygon'极坐标的形状,'polygon'|'circle' 多边形|圆形{Array}indicator[]雷达指标列表,同时也是label内容,例子见下
indicator : [ {text : '外观'}, {text : '拍照', min : 0}, {text : '系统', min : 0, max : 100}, {text : '性能', axisLabel: {...}}, {text : '屏幕'}]
series(通用)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,其中个别选项仅在部分图表类型中有效,请注意适用类型:
'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图)
'pie'(饼图) | 'radar'(雷达图) | 'chord'(和弦图) | 'force'(力导向布局图) | 'map'(地图){string}namenull通用系列名称,如启用legend,该值将被legend.data索引相关{Object}tooltipnull通用提示框样式,仅对本系列有效,如不设则用option.tooltip(详见tooltip),鼠标悬浮交互时的信息提示{boolean}clickabletrue通用数据图形是否可点击,默认开启,如果没有click事件响应可以关闭{Object}itemStylenull通用图形样式(详见itemStyle){Array}data[]通用数据(详见series.data){Array}markPoint{}通用标注(详见series.markPoint){Array}markLine{}通用标线(详见series.markLine)
series(直角系)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,其中个别选项仅在部分图表类型中有效,请注意适用类型:
'circle' | 'rectangle' | 'triangle' | 'diamond' |
'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'
另外,还支持五种更特别的标志图形'heart'(心形)、'droplet'(水滴)、'pin'(标注)、'arrow'(箭头)和'star'(五角星),这并不出现在常规的8类图形中,但无论是在系列级还是数据级上你都可以指定使用,同时,'star' + n(n>=3)可变化出N角星,如指定为'star6'则可以显示6角星
自1.3.5起支持symbol为自定义图片,格式为'image://' + '图片路径', 如'image://../asset/ico/favicon.png'
详见例子 this 》{number | Function | Array}symbolSize2 | 4折线图 (2),散点图(4)标志图形大小,可计算特性启用情况建议增大以提高交互体验。可以是单个值,如果在 symbol 为图片的时候想要分别设置宽高防止图片被拉伸,可以使用数组,其中数组第一个值是高,第二个值是宽。 实现气泡图时symbolSize需为Function,气泡大小取决于该方法返回值,传入参数为当前数据项(value数组)。{number}symbolRotatenull折线图 ,散点图标志图形旋转角度[-180,180]{boolean}showAllSymbolfalse折线图标志图形默认只有主轴显示(随主轴标签间隔隐藏策略),如需全部显示可把showAllSymbol设为true{boolean}smoothfalse折线图平滑曲线显示,smooth为true时lineStyle不支持虚线{boolean}dataFilter'nearst'折线图ECharts 会在折线图的数据数量大于实际显示的像素宽度(高度)的时候会启用优化,对显示在一个像素宽度内的数据做筛选,该选项是指明数据筛选的策略。
可选 'nearest', 'min', 'max', 'average'。或者是使用自定义的筛选函数{boolean} largefalse散点图启动大规模散点图{number}largeThreshold2000散点图大规模散点图自动切换阀值,large为true下有效{boolean}legendHoverLinktrue折线图,柱状图,散点图是否启用图例(legend)hover时的联动响应(高亮显示)
series(饼图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
series(雷达图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
series(地图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
新疆, 西藏, 内蒙古, 青海, 四川, 黑龙江, 甘肃, 云南, 广西, 湖南, 陕西,
广东,吉林, 河北, 湖北, 贵州, 山东, 江西, 河南, 辽宁, 山西, 安徽, 福建,
浙江, 江苏,重庆, 宁夏, 海南, 台湾, 北京, 天津, 上海, 香港, 澳门'
支持子区域模式,通过主地图类型扩展出所包含的子区域地图,格式为'主地图类型|子区域名称',如
'world|Brazil','china|广东',详见例子 this 》{boolean} hoverabletrue非数值显示(如仅用于显示标注标线时),可以通过hoverable:false关闭区域悬浮高亮{boolean}dataRangeHoverLinktrue是否启用值域漫游组件(dataRange)hover时的联动响应(详情披露){Object} mapLocation{x:'center',y:'center'}地图位置设置,默认只适应上下左右居中可配x,y,width,height,任意参数为空都将根据其他参数自适应{string}mapValueCalculation'sum'地图数值计算方式,默认为加和,可选为:'sum'(总数) | 'average'(均值){number}mapValuePrecision0地图数值计算结果小数精度,mapValueCalculation为average时有效,默认为取整,需要小数精度时设置大于0的整数{boolean}showLegendSymboltrue显示图例颜色标识(系列标识的小圆点),存在legend时生效{boolean | string}roamfalse是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游){Object} scaleLimitnull滚轮缩放的极限控制,可指定{max:number, min:number},其中max为放大系数,有效值应大于1,min为缩小系数,有效值应小于1{Object} nameMapnull自定义地区的名称映射,如{'China' : '中国'}{Object} textFixednull地区的名称文本位置修正,数值单位为px,正值为左下偏移,负值为右上偏移,如{'China' : [10, -10]}{Object} geoCoordnull通过绝对经纬度指定地区的名称文本位置,如{'Islands':[113.95, 22.26]},香港离岛区名称显示定位到东经113.95,北纬22.26上
series(力导向布局图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
series(和弦图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
series(仪表盘)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
传数组实现环形图,[内半径,外半径]{number} startAngle225开始角度, 饼图(90)、仪表盘(225),有效输入范围:[-360,360]{number} endAngle-45结束角度,有效输入范围:[-360,360],保证startAngle - endAngle为正值{number} min0指定的最小值{number} max100指定的最大值{number}splitNumber10分割段数,默认为10{Object} axisLine
{ show: true, lineStyle: { color: [ [0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500'] ], width: 30 }}坐标轴线,默认显示
属性show控制显示与否,
属性lineStyle(详见lineStyle)控制线条样式,
比较特殊的是这里的lineStyle.color是一个二维数组,用于把仪表盘轴线分成若干份,
并且可以给每一份指定具体的颜色,格式为:[[百分比, 颜色值], [...]]{Object} axisTick
{ show: true, splitNumber: 5, length :8, lineStyle: { color: '#eee', width: 1, type: 'solid' }}坐标轴小标记,默认显示
属性show控制显示与否,
属性lineStyle(详见lineStyle)控制线条样式,
属性splitNumber控制每份split细分多少段
属性length控制线长{Object} axisLabel
{ show: true, formatter: null, textStyle: { color: 'auto' }}坐标轴文本标签(详见axis.axislabel)
属性formatter可以格式化文本标签,
属性textStyle(详见textStyle)控制文本样式{Object} splitLine
{ show: true, length :30, lineStyle: { color: '#eee', width: 2, type: 'solid' }}主分隔线,默认显示
属性show控制显示与否,
属性length控制线长
属性lineStyle(详见lineStyle)控制线条样式,{Object} pointer
{ length : '80%', width : 8, color : 'auto'}指针样式
属性length控制线长,百分比相对的是仪表盘的外半径
属性width控制指针最宽处,
属性color控制指针颜色{Object} title
{ show : true, offsetCenter: [0, '-40%'], textStyle: { color: '#333', fontSize : 15 }}仪表盘标题
属性show控制显示与否,
属性offsetCenter用于标题定位,数组为横纵相对仪表盘圆心坐标偏移,支持百分比(相对外半径),
属性textStyle(详见textStyle)控制文本样式{Object} detail
{ show : true, backgroundColor: 'rgba(0,0,0,0)', borderWidth: 0, borderColor: '#ccc', width: 100, height: 40, offsetCenter: [0, '40%'], formatter: null, textStyle: { color: 'auto', fontSize : 30 }}仪表盘详情
属性show控制显示与否,
属性backgroundColor控制边框颜色,
属性borderWidth控制边框线宽,
属性borderColor控制边框颜色,
属性width控制详情宽度,
属性height控制详情高度,
属性offsetCenter用于详情定位,数组为横纵相对仪表盘圆心坐标偏移,支持百分比(相对外半径),
属性formatter可以格式化文本,
属性textStyle(详见textStyle)控制文本样式{boolean}legendHoverLinktrue是否启用图例(legend)hover时的联动响应(高亮显示)
series(漏斗图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
series(事件河流图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
series(矩形树图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
series(维恩图)
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:
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 : [2190.1, 2148.35, 2126.22, 2190.1] // // 开盘,收盘,最低,最高 }, [2242.26, 2210.9, 2205.07, 2250.63], ...]
当图表类型为饼图时,需要说明每部分数据的名称name,可设置选中状态,所以设置为:
[ { value : 12, name : 'apple' //每部分数据的名称 }, ...]
当图表类型为地图时,需要说明每部分数据对应的省份,可设置选中状态,所以设置为:
[ { name: '北京', value: 1234, selected: true }, { name: '天津', value: 321 }, ...]
series.markPoint
系列中的数据标注内容
{ show: false, type: 'scale', loop: true, period: 15, scaleSize : 2, bounceDistance: 10, color : null, shadowColor : null, shadowBlur : 0}标注图形炫光特效:
show 是否开启,默认关闭
type 特效类型,默认为'scale'(放大),可选还有'bounce'(跳动)
loop 循环动画,默认开启,
period 运动周期,无单位,值越大越慢,默认为15
scaleSize 放大倍数,以markPoint symbolSize为基准,type为scale时有效
bounceDistance 跳动距离,单位为px,type为bounce时有效
color 炫光颜色,默认跟随markPoint itemStyle定义颜色,
shadowColor 光影颜色,默认跟随color
shadowBlur 光影模糊度,默认为0
百度迁徙(模拟) »{Object} itemStyle{...}标注图形样式属性,同series中的itemStyle{Object} geoCoord{}地图特有,标注图形定位坐标,同series中的geoCoord{Array} data[]标注图形数据,见下
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
系列中的数据标线内容
大规模标线模式下会优化标线绘制,同个系列的的所有标线都会使用同一种样式,并且忽略标线两端 symbol 的绘制。{boolean} smoothfalse平滑曲线显示,smooth为true时lineStyle不支持虚线{number} smoothness0.2平滑曲线弧度,smooth为true时有效,指定平滑曲线弧度{number} precision2小数精度,使用开箱即用的均线markLine时有效{Object} bundling
{ enable: false, maxTurningAngle: 45}边捆绑:
enable 是否使用边捆绑,默认关闭
maxTurningAngle 边捆绑算法参数,可选 [0, 90] 的角度,配置捆绑后的边最大拐角, 默认为 45 度
注:捆绑算法使用 Multilevel Agglomerative Edge Bundling for Visualizing Large Graphs{Object} effect
{ show: false, loop: true, period: 15, scaleSize : 2, color : null, shadowColor : null, shadowBlur : null}标线图形炫光特效:
show 是否开启,默认关闭
loop 循环动画,默认开启,
period 运动周期,无单位,值越大越慢,默认为15
scaleSize 放大倍数,以markLine lineWidth为基准
color 炫光颜色,默认跟随markLine itemStyle定义颜色,
shadowColor 光影颜色,默认跟随color
shadowBlur 光影模糊度,默认根据scaleSize计算
百度迁徙(模拟) »{Object} itemStyle{...}标线图形样式属性,同series中的itemStyle{Object} geoCoord{}地图特有,标线图形定位坐标,同series中的geoCoord{Array} data[]标线图形数据,见下
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
图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式):
itemStyle: { normal: { ... }, emphasis: { ... }}
其中normal和emphasis属性为对象,其包含:
{seriesIndex:x, series:xxx, dataIndex:y, data:yyy}{Object}lineStyle图表各异折线图,K线图,markLine线条样式,详见lineStyle{Object}areaStyle图表各异堆积折线图,地图区域样式,详见areaStyle{Object}chordStyle图表各异和弦图弦样式,详见chordStyle{Object}nodeStyle图表各异力导向图节点样式,详见nodeStyle{Object}linkStyle图表各异力导向图边样式,详见linkStyle{string}borderColor各异折线图(symbol),散点图(symbole),饼图,地图,markPoint边框颜色{number}borderWidth各异折线图(symbol),散点图(symbole),饼图,地图,markPoint边框线宽,单位px{string}barBorderColor'#fff'柱形图边框颜色{number | Array}barBorderRadius0柱形图柱形边框圆角,单位px,默认为0,支持传入数组分别指定柱形4个圆角半径,如:[5, 5, 0, 0](顺时针左上,右上,右下,左下){number}barBorderWidth0柱形图柱形边框线宽,单位px,默认为0{Object} label
{ show: true, position:'outer'}折线图,柱形图,K线图,散点图,饼图 ,地图,力导向,漏斗图,markPoint,markLine标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,
漏斗图默认显示在右侧,离图形距离由labelLine.length决定
地图标签不可指定位置,
折线图,柱形图,K线图,散点图可指定position见下{Object}labelLine{show: true}饼图,漏斗图标签视觉引导线,默认显示
其中标签label属性为对象,其包含:
饼图可选为:'outer'(外部) | 'inner'(内部),
漏斗图可选为:'inner'(内部)| 'left' | 'right'(默认),
折线图,柱形图,K线图,散点图默认根据布局自适应为'top'或者'right',可选的还有:'inside' | 'left' | 'bottom'
柱形图可选的还有,'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom'{boolean} rotatefalse和弦图有效,文本标签自动旋转{number} distance10和弦图: 文本标签旋转后于弦的间隔
饼图: 当label position为inner时有效,为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数,默认为0.5。{string | Function}formatternull标签文本格式器,通用,同Tooltip.formatter,支持模板、方法回调,不支持异步回调{Object} textStylenull标签的文本样式(详见textStyle)
其中标签视觉引导线labelLine属性为对象,其包含:
通过有效设置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 »
lineStyle
线条(线段)样式
areaStyle
区域填充样式
chordStyle
和弦图中的弦样式
nodeStyle
力导向图中的节点样式
linkStyle
力导向图中的边样式
textStyle
文字样式
loadingOption
过渡显示,loading(读取中)的选项。try this »
noDataLoadingOption
无数据提示,loading动画选项。
backgroundColor
{color} null,全图默认背景,默认为null,同'rgba(0,0,0,0)'
color
{Array} [
'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
'#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
],默认颜色序列,循环使用
symbolList
{Array} [
'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} ' : ',数据合并名字与数值间连接符
animation
{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,可选有:
'Linear',
'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
nodes(data)
links
matrix
关系数据,用二维数组表示,项 [i][j] 的数值表示 i 到 j 的关系数据
多级控制设计
简单的说,你可以通过这三级满足不同level的定制和个性化需求:
- 通过 option.* 设置全局统一配置;
- 通过 option.series.* 设置特定系列特殊配置,其优先级高于 option 内的同名配置;
- 通过 option.series.data.* 设置特定数据项的特殊配置,最高优先级;
附录:地图扩展
支持百度地图作为地图源叠加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
timeline
时间轴,每个图表最多仅有一个时间轴。可使用的属性和方法有:
参数:{number=} index, {boolean=} autoPlay,(见下)
返回:{number} currendIndex,当前播放的options数组位置索引
index :指定需要播放的options数组位置索引,不指定则从当前index开始播放
autoPlay :是否自动播放,不指定则自动播放{Function}stop暂停
参数:无
返回:{number} currendIndex,当前播放的options数组位置索引{Function}next下一个
参数:无
返回:{number} currendIndex,当前播放的options数组位置索引{Function}last上一个
参数:无
返回:{number} currendIndex,当前播放的options数组位置索引
tooltip
提示框,鼠标悬浮交互时的信息提示,每个图表最多仅有一个提示框。可使用的属性和方法有:
参数:{Object} param (见下)
返回:null
参数格式:{ seriesIndex: 0, seriesName:'', dataIndex:0 } // line、bar、scatter、k、radar,其中dataIndex必须,seriesIndex、seriesName指定一个即可
参数格式:{ seriesIndex: 0, seriesName:'', name:'' } // map、pie、chord,其中name必须,seriesIndex、seriesName指定一个即可{Function}hideTip隐藏提示框。
参数:无
返回:null
legend
图例,每个图表最多仅有一个图例。可使用的属性和方法有:
参数:{string} name (名称)
返回:{boolean} true为开启,false为关闭{Function}getSelectedMap图例开关相关,获取当前的全部图例开关状态图。
参数:无
返回:{Object} {name:value}的键值表,name为名称,value为状态值,true为开启,false为关闭{Function}getColor图例颜色相关,获取传入的名称所对应的颜色,如果传入名称未出现在已有的图例数据项中,将生成一个新的颜色与传入名称匹配并返回该颜色
参数:{string} name (名称)
返回:{color} 匹配颜色{Function}setColor图例颜色相关,设置某一系列(数据)对应的颜色,改变颜色图表并不会自动刷新,如果需要更新调用实例的refresh方法
参数:{string} name (名称),{color} color 匹配颜色
返回:null{Function}setSelected设置某一系列(数据)的选择状态
参数:{string} name (名称),{boolean} status 状态
返回:null
dataRange
值域选择,每个图表最多仅有一个值域控件。可使用的属性和方法有:
参数:{number} value (值)
返回:{color} 匹配颜色
dataZoom
数据区域缩放。与toolbox.feature.dataZoom同步,仅对直角坐标系图表有效。可使用的属性和方法有:
参数:{Object} {start : value, end : value, start2 : value, end2 : value} (缩放参数)
返回:无,作用:根据传入的value改变数据显示区域,value有效值为[0,100],一般仅指定主区域控制start、end即可,在散点图中可以同时做两个维度的区域缩放,可通过额外指定start2、end2实现。
grid
直角坐标系内绘图网格。可使用的属性和方法有:
参数:无
返回:{number} 坐标值{Function}getXend网格右下角在图形显示中的横坐标,单位px。
参数:无
返回:{number} 坐标值{Function}getY网格左上角在图形显示中的纵坐标,单位px。
参数:无
返回:{number} 坐标值{Function}getYend网格右上角在图形显示中的纵坐标,单位px。
参数:无
返回:{number} 坐标值{Function}getWidth网格在图形显示中的实际宽度,单位px。
参数:无
返回:{number} 宽度值{Function}getHeight网格在图形显示中的实际高度,单位px。
参数:无
返回:{number} 高度值{Function}getArea网格实际区域数据,等同一次返回getX,getY,getWidth,getHeight。
参数:无
返回:{Object} {x : value, y : value, width : value, height : value}
xAxis/yAxis
横纵坐标轴。可使用的属性和方法有:
参数:{number} 0/1 (坐标轴index)
返回:{categoryAxis | valueAxis} 指定index的坐标轴实例,可以是类目轴或数值轴
categoryAxis
类目轴。可使用的属性和方法有:
参数:{string} name (名字)
返回:{number} 坐标值,重名类目值返回第一个匹配的{Function}getCoordByIndex根据类目轴数据索引换算绘图位置,单位px
参数:{number} index (索引)
返回:{number} 坐标值,index小于0返回坐标起点,大于类目长度返回重点{Function}getNameByIndex根据类目轴数据索引换算类目轴名称
参数:{number} index (索引)
返回:{string} 名字{Function}getIndexByName根据类目轴名称换算类目轴数据索引
参数:{string} name (名字)
返回:{number} 索引,重名类目值返回第一个匹配的
valueAxis
数值轴。可使用的属性和方法有:
参数:{number} value (数值)
返回:{number} 坐标值{Function}getExtremum返回当前坐标轴的极值
参数:null,
返回:{Object} {min:{number}, max:{number}}
polar
极坐标。可使用的属性和方法有:
参数:{number} polarIndex (极坐标索引), {number} indicatorIndex (指标索引), {number} value (数值)
返回:{Array} [x, y] 坐标值
图表实例接口
ECharts支持的图表有:line、bar、scatter、k、pie、radar、chord、force、map
map
地图。可使用的属性和方法有:
参数:{string} mapType (地图类型), {Array} [ew,ns] (经纬度)
返回:{Array} [x, y] 坐标值{Function}getGeoByPos平面坐标转经纬度,单位px
参数:{string} mapType (地图类型), {Array} [x, y] (坐标值 )
返回:{Array} [ew,ns] 经纬度
附录:一个直观的事例
查看更多实例 example,或者使用这个demo 或 ECharts单一文件引入作为你的模板
// 图表实例化------------------// srcipt标签式引入var myChart = echarts.init(document.getElementById('main'));// 过渡---------------------myChart.showLoading({ text: '正在努力的读取数据中...', //loading话术});// ajax getting data...............// ajax callbackmyChart.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();
- ECharts-Javascript的图表库推荐
- JavaScript数据图表库推荐--百度ECharts
- Echarts-----javascript图表库
- JavaScript图表库 ECharts
- 推荐一个不错的纯 Javascript图表库——ECharts
- 开源的数据可视化JavaScript图表库:ECharts
- 开源的数据可视化JavaScript图表库:ECharts
- 开源的数据可视化JavaScript图表库:ECharts
- ECharts——纯Javascript的图表库
- ECharts-JavaScript图表库学习记录
- 一个强大的图表库 -- ECharts
- echarts: 图表的搬运工
- echarts图表的使用
- ECharts,一个javascript 互动图表库,使用例子。
- Echarts图表的简单实现
- echarts图表插件的使用
- ECharts一个强大的商业产品图表库
- 百度Echarts-免费的商业产品图表库
- 指针与数组
- 「HD_ACM」A+B for Input-Output Practice (VI)
- Struts2+Spring+Ibatis用户注册、登录、管理入门学习实例源码下载
- 解决错误:Call requires API level 11 (current min is 8): new android.app.Fragment
- HDU 5091 Beam Cannon
- ECharts-Javascript的图表库推荐
- 黑马程序员——Java基础---Java集合
- poj1027 模拟 坑..
- C Primer Plus 第十一章学习总结^2015.5.2
- Java调试小例子(如何使用F5和F6)
- NYOJ 68:三点顺序
- 开始坚持每天写点东西
- VMware10.0.1安装与配置
- iOS开发-使用Storyboard进行界面跳转及传值