ECharts,纯Javascript图表库,基于Canvas,底层依赖ZRender,商业产品常用图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图,同时支持任意维度的堆积和多图表混合展现。
基本名词
名词 | 描述 |
---|---|
chart | 是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等 |
axis | 直角坐标系中的一个坐标轴,坐标轴可分为类目轴和数值轴 |
xAxis | 直角坐标系中的横轴,通常并默认为类目轴 |
yAxis | 直角坐标系中的纵轴,通常并默认为数值轴 |
grid | 直角坐标系中除坐标轴外的绘图网格 |
legend | 图例 |
dataRange | 值域选择,常用于展现地域数据时选择值域范围 |
toolbox | 辅助工具箱 |
tooltip | 气泡提示框,用于展现更详细的数据 |
dataZoom | 数据区域缩放,常用于展现大数据时选择可视范围 |
series | 数据系列 |
图表名词
名词 | 描述 |
---|---|
line | 折线图,堆积折线图,区域图,堆积区域图 |
bar | 柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图 |
scatter | 散点图,气泡图,大规模散点图 |
k | K线图,蜡烛图, |
pie | 饼图,圆环图 |
radar | 雷达图,填充雷达图 |
chord | 和弦图 |
force | 力导布局图 |
map | 地图(支持中国及全国34个省市自治区地图) |
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表:
折线图 | 堆积折线图 | 区域图 | 堆积区域图 |
---|---|---|---|
柱形图 | 堆积柱形图 | 条形图 | 堆积条形图 |
---|---|---|---|
散点图 | 气泡图 |
---|---|
K线图 |
---|
饼图 | 圆环图 | 南丁格尔玫瑰图 |
---|---|---|
雷达图 | 填充雷达图 |
---|---|
和弦图 | 多维度选择和弦图 |
---|---|
力导向布局图。 |
---|
中国地图 | 全国34个省市自治区 | 世界地图 | 子区域模式 |
---|---|---|---|
echarts提供多种引入方式,请根据你的项目类型选择合适的方式:
如果你的项目本身就是模块化的,那引入echarts将很简单,只需要配置好packet路径指向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' } ] });
我们建议你使用单一文件引入,如你所发现的,build文件夹下已经生成了多个单文件见下,根据你的需求使用:
如果需要更加定制的打包文件,建议在node环境下安装require.js,build文件夹内为你准备好配置项,可根据你的项目需求,修改config-tpl.js以构建你的最佳配置。
采用单一文件使用例子见ECharts单一文件引入,存放在example/www下,你需要配置如下:
//from echarts example require.config({ paths:{ 'echarts:'./js/echarts', 'echarts/chart/bar' : './js/echarts', // 把所需图表指向单文件 'echarts/chart/line': './js/echarts' } });
require.config配置后后就可以通过动态加载使用echarts
//from echarts example require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(domMain); var option = { ... } myChart.setOption(option); } );
总结来说,模块化如何引入ECharts,你都需要如下4步:
自1.3.5开始,ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的,或者是基于CMD规范(如使用的是seajs),那么引入基于AMD模块化的echarts可能并不方便,我们建议你采用srcipt标签式引入,忘掉require,srcipt标签引入echarts后将可以直接使用两个全局的命名空间:echarts,zrender,可参考ECharts标签式引入
//from echarts example < script src="example/www2/js/echarts-plain.js" > < /script> < script > var myChart = echarts.init(domMain); var option = { ... } myChart.setOption(option); < /script>
通过require获得echarts接口后可实例化图表,echarts接口仅有一个方法init,执行init时传入一个具备大小的dom节点(width、height可被计算得到即可,不一定可见)后即可实例化出图表对象,图表库实现为多实例的,同一页面可多次init出多个图表。图表实例可用方法见方法,
引入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支持链式调用
名称 | 参数 | 描述 |
---|---|---|
{self} setOption | {Object} option, {boolean=} notMerge |
万能接口,配置图表实例任何可配置选项(详见option),多次调用时option选项是默认是合并(merge)的, 如果不需求,可以通过notMerger参数为true阻止与上次option的合并。 |
{Object} getOption | {void} | 返回内部持有的当前显示option克隆 |
{self} setSeries | {Array} series, {boolean=} notMerge |
数据接口,驱动图表生成的数据内容(详见series),效果等同调用setOption({series:{...}}) |
{Object} getSeries | {void} | 返回内部持有的当前显示series克隆,效果同return 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} on | {string} eventName, {Function} eventListener |
事件绑定,支持事件有: REFRESH,RESTORE,CLICK,HOVER, DATA_CHANGED,MAGIC_TYPE_CHANGED,DATA_VIEW_CHANGED, DATA_ZOOM,DATA_RANGE,LEGEND_SELECTED,MAP_SELECTED |
{self} un | {string} eventName, {Function} eventListener |
事件解绑定 |
{self} showLoading | {Object} loadingOption | 过渡控制(详见loadingOption),显示loading(读取中) |
{self} hideLoading | {void} | 过渡控制,隐藏loading(读取中) |
{ZRender} getZrender | {void} | 获取当前图表所用ZRender实例,可用于添加额外图形或进行深度定制,zrender接口详见ZRender |
{string} getDataURL | {string=} imgType | 获取当前图表的Base64图片dataURL,imgType 图片类型,支持png|jpeg,默认为png |
{Dom} getImage | {string=} imgType | 获取一个当前图表的img,imgType 图片类型,支持png|jpeg,默认为png |
{self} resize | {void} | ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道, 使用方可以根据自己的需求绑定关心的事件,主动调用resize达到区域更新的效果。 |
{self} refresh | {void} | 刷新图表,图例选择、数据区域缩放,拖拽状态均保持。 |
{self} restore | {void} | 还原图表,各种状态均被清除,还原为最初展现时的状态。 |
{self} clear | {void} | 清空绘画内容,清空后实例可用 |
{void} dispose | {void} | 释放图表实例,释放后实例不再可用 |
图表选项,包含图表实例任何可配置选项
名称 | 描述 |
---|---|
{Array} color | 数值系列的颜色列表,默认为null则采用内置颜色,可配数组,eg:['#87cefa', 'rgba(123,123,123,0.5)','...'],当系列数量个数比颜色列表长度大时将循环选取 |
{Object} title | 标题(详见title),每个图表最多仅有一个标题控件 |
{Object} legend | 图例(详见legend),每个图表最多仅有一个图例,混搭图表共享 |
{Object} dataRange | 值域选择(详见dataRange),值域范围 |
{Object} toolbox | 工具箱(详见toolbox),每个图表最多仅有一个工具箱 |
{Object} tooltip | 提示框(详见tooltip),鼠标悬浮交互时的信息提示 |
{Object} dataZoom | 数据区域缩放(详见dataZoom),数据展现范围选择 |
{Object} grid | 直角坐标系内绘图网格(详见grid) |
{Array | Object} xAxis | 直角坐标系中横轴数组(详见xAxis),数组中每一项代表一条横轴坐标轴,标准(1.0)中规定最多同时存在2条横轴 |
{Array | Object} yAxis | 直角坐标系中纵轴数组(详见yAxis),数组中每一项代表一条纵轴坐标轴,标准(1.0)中规定最多同时存在2条纵轴 |
{Array} series | 驱动图表生成的数据内容(详见series),数组中每一项代表一个系列的特殊选项及数据 |
标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题。
名称 | 默认值 | 描述 |
---|---|---|
{string} text | '' | 主标题文本 |
{string} link | '' | 主标题文本超链接 |
{string} subtext | '' | 副标题文本 |
{string} sublink | '' | 副标题文本超链接 |
{string | number} x | 'left' | 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) |
{string | number} y | 'top' | 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) |
{string} textAlign | null | 水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center |
{color} backgroundColor | 'rgba(0,0,0,0)' | 标题背景颜色,默认透明 |
{string} borderColor | '#ccc' | 标题边框颜色 |
{number} borderWidth | 0 | 标题边框线宽,单位px,默认为0(无边框) |
{number | Array} padding | 5 | 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图 |
{number} itemGap | 10 | 主副标题纵向间隔,单位px,默认为10 |
{Object} textStyle | { fontSize: 18, fontWeight: 'bolder', color: '#333' } |
主标题文本样式(详见textStyle) |
{Object} subtextStyle | {color: '#aaa'} | 副标题文本样式(详见textStyle) |
图例,每个图表最多仅有一个图例。try this »
名称 | 默认值 | 描述 |
---|---|---|
{string} orient | 'horizontal' | 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical' |
{string | number} x | 'center' | 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) |
{string | number} y | 'top' | 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) |
{color} backgroundColor | 'rgba(0,0,0,0)' | 图例背景颜色,默认透明 |
{string} borderColor | '#ccc' | 图例边框颜色 |
{number} borderWidth | 0 | 图例边框线宽,单位px,默认为0(无边框) |
{number | Array} padding | 5 | 图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图 |
{number} itemGap | 10 | 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔,见下图 |
{Object} textStyle | {color: '#333'} | 默认只设定了图例文字颜色(详见textStyle) |
{boolean} selectedMode | true | 选择模式,默认开启图例开关 |
{Object} selected | null | 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入,try this » |
{Array <string>} data | [ ] | 图例内容数组,数组项为{string},每一项代表一个系列的name。 使用根据该值索引series中同名系列所用的图表类型和itemStyle,如果索引不到,该item将默认为没启用状态。 |
值域选择,每个图表最多仅有一个值域控件。try this »
名称 | 默认值 | 描述 |
---|---|---|
{string} orient | 'vertical' | 布局方式,默认为垂直布局,可选为:'horizontal' | 'vertical' |
{string | number} x | 'left' | 水平安放位置,默认为全图左对齐,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) |
{string | number} y | 'bottom' | 垂直安放位置,默认为全图底部,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) |
{color} backgroundColor | 'rgba(0,0,0,0)' | 值域控件背景颜色,默认透明 |
{string} borderColor | '#ccc' | 值域控件边框颜色 |
{number} borderWidth | 0 | 值域控件边框线宽,单位px,默认为0(无边框) |
{number | Array} padding | 5 | 值域控件内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图 |
{number} itemGap | 10 | 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔,见下图 |
{number} min | null | 指定的最小值,eg: 0,默认无,必须参数 |
{number} max | null | 指定的最大值,eg: 100,默认无,必须参数 |
{number} precision | 0 | 小数精度,默认为0,无小数点 |
{number} splitNumber | 5 | 分割段数,默认为5,为0时为线性渐变 |
{boolean} calculable | false | 是否启用值域漫游,启用后无视splitNumber,值域显示为线性渐变 |
{boolean} realtime | true | 值域漫游是否实时显示 |
{Array} color | ['#1e90ff','#f0ffff'] | 值域颜色标识,颜色数组长度必须>=2,颜色代表从数值高到低的变化,即颜色数组低位代表数值高的颜色标识 |
{Array} text | null | 值域文字显示,splitNumber生效时默认以计算所得数值作为值域文字显示,可指定长度为2的文本数组显示简介的值域文本,如['高', '低'] |
{Object} textStyle | {color: '#333'} | 默认只设定了值域控件文字颜色(详见textStyle) |
工具箱,每个图表最多仅有一个工具箱。
名称 | 默认值 | 描述 |
---|---|---|
{boolean} show | false | 显示策略,可选为:true(显示) | false(隐藏) |
{string} orient | 'horizontal' | 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical' |
{string | number} x | 'center' | 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) |
{string | number} y | 'top' | 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) |
{color} backgroundColor | 'rgba(0,0,0,0)' | 工具箱背景颜色,默认透明 |
{string} borderColor | '#ccc' | 工具箱边框颜色 |
{number} borderWidth | 0 | 工具箱边框线宽,单位px,默认为0(无边框) |
{number | Array} padding | 5 | 工具箱内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图 |
{number} itemGap | 10 | 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔,见下图 |
{number} itemSize | 16 | 工具箱icon大小,单位(px) |
{Array <color>} color | ['#1e90ff','#22bb22','#4b0082','#d2691e'] | 工具箱icon颜色序列,循环使用 |
{Object} feature | {} | 启用功能,目前支持feature见下 |
{boolean} showTitle | true | 是否显示工具箱文字提示,默认启用 |
{Object} featureTitle | { mark : '辅助线开关', markUndo : '删除辅助线', markClear : '清空辅助线', dataZoom : '区域缩放', dataZoomReset : '区域缩放后退', dataView : '数据视图', lineChart : '折线图切换', barChart : '柱形图切换', restore : '还原', saveAsImage : '保存为图片' } |
工具箱文字提示默认话术 |
feature : { mark : true, // 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部 dataZoom : true, // 框选区域缩放,自动与存在的dataZoom控件同步,上图icon左数4/5,分别是启用,缩放后退 magicType:['line', 'bar'], // 图表类型切换,当前仅支持直角系下的折线图、柱状图转换,上图icon左数6/7,分别是切换折线图,切换柱形图 dataView : true, // 数据视图,上图icon左数8,打开数据视图 restore : true // 还原,复位原始图表,上图icon左数9,还原 saveAsImage : true // 保存为图片,上图icon左数10,保存 }
feature选项
提示框,鼠标悬浮交互时的信息提示。try this »
名称 | 默认值 | 描述 |
---|---|---|
{boolean} show | true | 显示策略,可选为:true(显示) | false(隐藏) |
{boolean} showContent | true | tooltip主体内容显示策略,只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为falase, 可选为:true(显示) | false(隐藏) |
{string} trigger | 'item' | 触发类型,默认数据触发,见下图,可选为:'item' | 'axis' |
{string | Function} formatter | null | 内容格式器:{string}(Template) | {Function},支持异步回调见表格下方 |
{string | Function} islandFormatter | '{a} < br/>{b} : {c}' | 拖拽重计算独有,数据孤岛内容格式器:{string}(Template) | {Function},见表格下方 |
{number} showDelay | 20 | 显示延迟,添加显示延迟可以避免频繁切换,单位ms |
{number} hideDelay | 100 | 隐藏延迟,单位ms |
{number} transitionDuration | 0.4 | 动画变换时长,单位s |
{color} backgroundColor | 'rgba(0,0,0,0.7)' | 提示背景颜色,默认为透明度为0.7的黑色 |
{string} borderColor | '#333' | 提示边框颜色 |
{number} borderRadius | 4 | 提示边框圆角,单位px,默认为4 |
{number} borderWidth | 0 | 提示边框线宽,单位px,默认为0(无边框) |
{number | Array} padding | 5 | 提示内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css |
{Object} axisPointer | { type : 'line', lineStyle : { color: '#48b', width: 2, type: 'solid' }, areaStyle : { size: 'auto', color: 'rgba(150,150,150,0.3)' } } |
坐标轴指示器,坐标轴触发有效,默认type为line,可选为:'line' | 'shadow' | 'none'(无), lineStyle设置直线指示器(详见lineStyle), areaStyle设置阴影指示器(详见areaStyle),areaStyle.size默认为'auto'自动计算,可指定具体宽度 |
{Object} textStyle | { color:'#fff' } | 文本样式,默认为白色字体(详见textStyle) |
内容格式器formatter:
触发类型:
item触发 | axis触发 |
---|---|
数据区域缩放。与toolbox.feature.dataZoom同步,仅对直角坐标系图表有效。try this »
名称 | 默认值 | 描述 |
---|---|---|
{boolean} show | false | 是否显示,当show为true时则接管使用指定类目轴的全部系列数据,如不指定则接管全部直角坐标系数据。 |
{string} orient | 'horizontal' | 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical' |
{number} x | 自适应 | 水平安放位置,默认为根据grid参数适配,纵向布局默认左侧,可指定 {number}(左上角x坐标,单位px) |
{number} y | 自适应 | 垂直安放位置,默认为根据grid参数适配,纵向布局默认下方,可指定 {number}(左上角y坐标,单位px) |
{number} width | 自适应 | 30 | 指定宽度,横向布局时默认为根据grid参数适配,纵向布局是默认为30,可指定 {number}(宽度,单位px) |
{number} height | 自适应 | 30 | 指定高度,纵向布局时默认为根据grid参数适配,横向布局是默认为30,可指定 {number}(高度,单位px) |
{color} backgroundColor | '#eee' | 背景颜色 |
{color} dataBackgroundColor | '#ccc' | 数据缩略背景颜色 |
{color} fillerColor | 'rgba(50,205,50,0.4)' | 选择区域填充颜色 |
{color} handleColor | 'rgba(70,130,180,0.8)' | 控制手柄颜色 |
{(Array | number)} xAxisIndex | null | 当不指定时默认控制所有横向类目,可通过数组指定多个需要控制的横向类目坐标轴Index,仅一个时可直接为数字 |
{(Array | number)} yAxisIndex | null | 当不指定时默认控制所有纵向类目,可通过数组指定多个需要控制的纵向类目坐标轴Index,仅一个时可直接为数字 |
{number} start | 0 | 数据缩放,选择起始比例,默认为0,从首个数据起选择。 |
{number} end | 100 | 数据缩放,选择结束比例,默认为100(%),到最后一个数据选择结束。 |
{boolean} realtime | false | 缩放变化是否实时显示,建议性能较低的浏览器或数据量巨大时不启动实时效果。 |
{boolean} zoomLock | false | 数据缩放锁,默认为false,当设置为true时选择区域不能伸缩,即(end - start)值保持不变,仅能做数据漫游。 |
直角坐标系内绘图网格
名称 | 默认值 | 描述 |
---|---|---|
{number} x | 80 | 直角坐标系内绘图网格左上角横坐标,数值单位px |
{number} y | 60 | 直角坐标系内绘图网格左上角纵坐标,数值单位px |
{number} x2 | 80 | 直角坐标系内绘图网格右下角横坐标,数值单位px |
{number} y2 | 60 | 直角坐标系内绘图网格右下角纵坐标,数值单位px |
{number} width | 自适应 | 直角坐标系内绘图网格(不含坐标轴)宽度,默认为总宽度 - x - x2,数值单位px,指定width后将忽略x2,见下图。 |
{number} height | 自适应 | 直角坐标系内绘图网格(不含坐标轴)高度,默认为总宽度 - y - y2,数值单位px,指定height后将忽略y2,见下图。 |
{color} backgroundColor | '#fff' | 背景颜色。 |
{number} borderWidth | 1 | 边框线宽 |
{color} borderColor | '#ccc' | 边框颜色。 |
直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数值。最多同时存在2条横轴,单条横轴时可指定安放于grid的底部(默认)或顶部,2条同时存在时位置互斥,默认第一条安放于底部,第二条安放于顶部。
坐标轴有两种类型,类目型和数值型(区别详见axis),横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型,具体参数详见axis。
直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数值。最多同时存在2条纵轴,单条纵轴时可指定安放于grid的左侧(默认)或右侧,2条同时存在时位置互斥,默认第一条安放于左侧,第二条安放于右侧。
坐标轴有两种类型,类目型和数值型(区别详见axis),纵轴通常为数值型,但条形图时则纵轴为类目型,具体参数详见axis。
坐标轴有两种类型,类目型和数值型,他们的区别在于:
下面是坐标轴的全部选项,其中个别选项仅在类目型或数值型时有效,请注意适用类型。try this »
名称 | 默认值 | 适用类型 | 描述 |
---|---|---|---|
{string} type | 'category' | 'value' | 通用 | 坐标轴类型,横轴默认为类目型'category',纵轴默认为数值型'value' |
{string} position | 'bottom' | 'left' | 通用 | 坐标轴类型,横轴默认为类目型'bottom',纵轴默认为数值型'left',可选为:'bottom' | 'top' | 'left' | 'right' |
{string} name | '' | 数值型 | 坐标轴名称,默认为空 |
{string} nameLocation | 'end' | 数值型 | 坐标轴名称位置,默认为'end',可选为:'start' | 'end' |
{boolean} boundaryGap | true | 类目型 | 类目起始和结束两端空白策略,见下图,默认为true留空,false则顶头 |
{Array} boundaryGap | [0, 0] | 数值型 | 数值轴两端空白策略,数组内数值代表百分比,[原始数据最小值与最终最小值之间的差额,原始数据最大值与最终最大值之间的差额] |
{number} min | null | 数值型 | 指定的最小值,eg: 0,默认无,会自动根据具体数值调整,指定后将忽略boundaryGap[0] |
{number} max | null | 数值型 | 指定的最大值,eg: 100,默认无,会自动根据具体数值调整,指定后将忽略boundaryGap[1] |
{boolean} scale | false | 数值型 | 脱离0值比例,放大聚焦到最终_min,_max区间 |
{number} precision | 0 | 数值型 | 小数精度,默认为0,无小数点 |
{number} power | 100 | 数值型 | 整数精度,默认为100,个位和百位为0 |
{number} splitNumber | 5 | 数值型 | 分割段数,默认为5 |
{Object} axisLine | {show : true} | 通用 | 坐标轴线,默认显示,属性show控制显示与否,属性lineStyle(详见lineStyle)控制线条样式 |
{Object} axisTick | {show : false} | 通用 | 坐标轴小标记,默认不显示,属性show控制显示与否,属性length控制线长,属性lineStyle(详见lineStyle)控制线条样式 |
{Object} axisLabel | {show : true} | 通用 | 坐标轴文本标签,详见axis.axisLabel |
{Object} splitLine | {show : true} | 通用 | 分隔线,默认显示,属性show控制显示与否,属性lineStyle(详见lineStyle)控制线条样式 |
{Object} splitArea | {show : false} | 通用 | 分隔区域,默认不显示,属性show控制显示与否,属性areaStyle(详见areaStyle)控制区域样式 |
{Array} data | [] | 类目型 | 类目列表,同时也是label内容,详见axis.data |
boundaryGap端空白策略
设置 | 效果 |
---|---|
boundaryGap: true | |
boundaryGap: false |
scale策略
设置 | scale: false | scale: true |
---|---|---|
效果 |
axis属性说明
坐标轴线,默认显示且带如下样式:
名称 | 默认值 | 适用类型 | 描述 |
---|---|---|---|
{boolean} show | true | 通用 | 是否显示,默认为true,设为false后下面都没意义了 |
{Object} lineStyle | {color: '#48b', width: 2, type: 'solid'} | 通用 | 属性lineStyle控制线条样式,(详见lineStyle) |
坐标轴小标记,默认不显示,默认样式见下:
名称 | 默认值 | 适用类型 | 描述 |
---|---|---|---|
{boolean} show | false | 通用 | 是否显示,默认为false,设为true后下面为默认样式 |
{number} length | 4 | 通用 | 属性length控制线长 |
{Object} lineStyle | {color: '#ccc', width: 1, type: 'solid'} | 通用 | 属性lineStyle控制线条样式,(详见lineStyle) |
坐标轴文本标签选项
名称 | 默认值 | 适用类型 | 描述 |
---|---|---|---|
{boolean} show | true | 通用 | 是否显示,默认为true,设为false后下面都没意义了 |
{string | number} interval | 'auto' | 类目型 | 标签显示挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显示) | {number}(用户指定选择间隔) |
{number} rotate | 0 | 通用 | 标签旋转角度,默认为0,不旋转,正直为逆时针,负值为顺时针,可选为:-90 ~ 90 |
{number} margin | 8 | 通用 | 坐标轴文本标签与坐标轴的间距,默认为8,单位px |
{string | Function} formatter | null | 通用 | 间隔名称格式器:{string}(Template) | {Function} |
{Object} textStyle | {color: '#333'} | 通用 | 文本样式(详见textStyle) |
间隔名称格式器formatter:
分隔线,默认显示且带如下样式:
名称 | 默认值 | 适用类型 | 描述 |
---|---|---|---|
{boolean} show | true | 通用 | 是否显示,默认为true,设为false后下面都没意义了 |
{Object} lineStyle | {color: ['#ccc'], width: 1, type: 'solid'} | 通用 | 属性lineStyle控制线条样式,(详见lineStyle) |
分隔区域,默认不显示:
名称 | 默认值 | 适用类型 | 描述 |
---|---|---|---|
{boolean} show | false | 通用 | 是否显示,默认为false,设为true后带如下默认样式 |
{Object} areaStyle | {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']} | 通用 | 属性areaStyle(详见areaStyle)控制区域样式,颜色数组实现间隔变换。 |
类目型坐标轴文本标签数组,指定label内容。 数组项通常为文本,如:
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ..., 'Dec']
当需要对个别标签进行个性化定义时,数组项可用对象,接受textStyle设置个性化标签,如:
[ 'Jav', 'Feb', 'Mar', { value:'Apr', //文本内容,如指定间隔名称格式器formatter,则这个值将被作为模板变量值或参数传入 textStyle:{ //详见textStyle color : 'red' ... } }, 'May', '...' ]
极坐标:
名称 | 默认值 | 描述 |
---|---|---|
{Array} center | ['50%', '50%'] | 圆心坐标,支持绝对值(px)和百分比,百分比计算min(width, height) * 50% |
{number} radius | '75%' | 半径,支持绝对值(px)和百分比,百分比计算min(width, height) / 2 * 75%, |
{number} startAngle | 90 | 开始角度, 有效输入范围:[-180,180] |
{number} splitNumber | 5 | 分割段数,默认为5 |
{object} name | { show:true, formatter:null, textStyle:{color:#333} } |
坐标轴名称 |
{Array} boundaryGap | [0, 0] | 数值轴两端空白策略,数组内数值代表百分比,[原始数据最小值与最终最小值之间的差额,原始数据最大值与最终最大值之间的差额] |
{boolean} scale | false | 脱离0值比例,放大聚焦到最终_min,_max区间 |
{number} precision | 0 | 小数精度,默认为0,无小数点 |
{number} power | 100 | 整数精度,默认为100,个位和百位为0 |
{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)控制区域样式 |
{Array} indicator | [] | 雷达指标列表,同时也是label内容,例子见下 |
indicator : [ {name : '外观'}, {name : '拍照', min : 0}, {name : '系统', min : 0, max : 100}, {name : '性能', axisLabel: {...}}, {name : '屏幕'} ]
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,其中个别选项仅在部分图表类型中有效,请注意适用类型:
名称 | 默认值 | 适用类型 | 描述 |
---|---|---|---|
{string} name | null | 通用 | 系列名称,如启用legend,该值将被legend.data索引相关 |
{Object} tooltip | null | 通用 | 提示框样式,仅对本系列有效,如不设则用option.tooltip(详见tooltip),鼠标悬浮交互时的信息提示 |
{string} type | null | 通用 | 图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。可选为:
'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图) 'pie'(饼图) | 'radar'(雷达图) | 'chord'(和弦图) | 'force'(力导向布局图) | 'map'(地图) |
{Object} itemStyle | null | 通用 | 图形样式(详见itemStyle) |
{string} stack | null | 折线图,柱状图 | 组合名称,多组数据的堆积图时使用,eg:stack:'group1',则series数组中stack值等于'group1'的数据做堆积计算 |
{number} xAxisIndex | 0 | 折线图,柱状图,散点图 ,K线图 | xAxis坐标轴数组的索引,指定该系列数据所用的横坐标轴 |
{number} yAxisIndex | 0 | 折线图,柱状图,散点图,K线图 | yAxis坐标轴数组的索引,指定该系列数据所用的纵坐标轴 |
{number | string} barGap | '30%' | 柱状图 | 柱间距离,默认为柱形宽度的30%,可设固定值 |
{number | string} barCategoryGap | '20%' | 柱状图 | 类目间柱形距离,默认为类目间距的20%,可设固定值 |
{number} barMinHeight | 0 | 柱状图 | 柱条最小高度,可用于防止某item的值过小而影响交互 |
{number} barWidth | 自适应 | 柱状图 ,K线图 | 柱条(K线蜡烛)宽度,不设时自适应 |
{number} barMaxWidth | 自适应 | K线图 | K线蜡烛最大宽度,不设时自适应 |
{string} symbol | null | 折线图,散点图 | 标志图形类型,默认自动选择(8种类型循环使用,不显示标志图形可设为'none'),默认循环选择类型有: 'circle' | 'rectangle' | 'triangle' | 'diamond' | 'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外,还支持两种更特别的标志图形'arrow'(箭头)和'star'(五角星),这并不出现在常规的8类图形中,但无论是在系列级还是数据级上你都可以指定使用,同时,'star' + n(n>=3)可变化出N角星,如指定为'star6'则可以显示6角星 自1.3.5起支持symbol为自定义图片,格式为'image://' + '图片路径', 如'image://../asset/ico/favicon.png' 详见例子 this 》 |
{number | Function} symbolSize | 2 | 4 | 折线图 (2),散点图(4) | 标志图形大小,可计算特性启用情况建议增大以提高交互体验。实现气泡图时symbolSize需为Function,气泡大小取决于该方法返回值,传入参数为当前数据项(value数组) |
{number} symbolRotate | null | 折线图 ,散点图 | 标志图形旋转角度[-180,180] |
{boolean} showAllSymbol | false | 折线图 | 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略),如需全部显示可把showAllSymbol设为true |
{boolean} smooth | false | 折线图 | 平滑曲线显示 |
{number} largeThreshold | 2000 | 散点图 | 大规模散点图自动切换阀值 |
{Array} center | ['50%', '50%'] | 饼图 | 圆心坐标,支持绝对值(px)和百分比,百分比计算min(width, height) * 50% |
{number | Array} radius | [0, '75%'] | 饼图 | 半径,支持绝对值(px)和百分比,百分比计算比,min(width, height) / 2 * 75%, 传数组实现环形图,[内半径,外半径] |
{number} startAngle | 90 | 饼图 | 开始角度, 有效输入范围:[-180,180] |
{number} minAngle | 0 | 饼图 | 最小角度,可用于防止某item的值过小而影响交互 |
{string} roseType | null | 饼图 | 南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积) |
{number} selectedOffset | 10 | 饼图 | 选中是扇区偏移量 |
{string} selectedMode | null | 饼图,地图 | 选中模式,默认关闭,可选single,multiple |
{string} mapType | 'china' | 地图 | 地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:
新疆, 西藏, 内蒙古, 青海, 四川, 黑龙江, 甘肃, 云南, 广西, 湖南, 陕西, 广东,吉林, 河北, 湖北, 贵州, 山东, 江西, 河南, 辽宁, 山西, 安徽, 福建, 浙江, 江苏,重庆, 宁夏, 海南, 台湾, 北京, 天津, 上海, 香港, 澳门' 支持子区域模式,通过主地图类型扩展出所包含的子区域地图,格式为'主地图类型|子区域名称',如 'world|Brazil','china|广东',详见例子 this 》 |
{Object} mapLocation | {x:'center',y:'center'} | 地图 | 地图位置设置,默认只适应上下左右居中可配x,y,width,height,任意参数为空都将根据其他参数自适应 |
{string} mapValueCalculation | 'sum' | 地图 | 地图数值计算方式,默认为加和,可选为:'sum'(总数) | 'average'(均值) |
{Object} roam | false | 地图 | 是否开启滚轮缩放和拖拽漫游 |
{Object} nameMap | null | 地图 | 自定义地区的名称映射,如{'China' : '中国'} |
{Object} textFixed | null | 地图 | 地区的名称文本位置修正,数值单位为px,正直为左下偏移,负值为右上偏移,如{'China' : [10, -10]} |
{Object} geoCoord | null | 地图 | 通过绝对经纬度指定地区的名称文本位置,如{'Islands':[113.95, 22.26]},香港离岛区名称显示定位到东经113.95,北纬22.26上 |
{Array} categories | [] | 力导向 | 力导向图中节点的分类, 每一项有name和itemStyle两个属性,itemStyle配置详见itemStyle |
{Array} nodes | [] | 力导向 | 力导向图的顶点数据, 每一项都有 name, value, category三个属性,分别表示节点的名称, 节点的值和节点的分类 |
{Array} links | [] | 力导向 | 力导向图的边数据, 每一项都有 source, target, weight三个属性, source和target是顶点的索引值, 边的权重(weight)越大则两个顶点之间的联系越大(最后稳定之后的距离越小) |
{number} minRadius | 10 | 力导向 | 顶点数据映射成圆半径后的最小半径 |
{number} maxRadius | 20 | 力导向 | 顶点数据映射成圆半径后的最大半径 |
{number} density | 1 | 力导向 | 顶点的密度,影响布局时顶点运动的速度,值越大速度越慢 |
{number} attractiveness | 1 | 力导向 | 顶点之间的引力系数,影响到布局稳定之后的大小,值越大则稳定之后顶点之间的距离越小 |
{number} padding | 2 | 弦图 | 每个sector之间的间距(用角度表示) |
{string} sort | 'none' | 弦图 | 数据排序, 可以取none, ascending, descending |
{string} sortSub | 'none' | 弦图 | 数据排序(弦), 可以取none, ascending, descending |
{boolean} showScale | false | 弦图 | 是否显示刻度 |
{boolean} showScaleText | false | 弦图 | 是否显示刻度文字 |
{boolean} clockWise | false | 弦图 | 显示是否顺时针 |
{Array} matrix | [[]] | 弦图 | 关系数据,用二维数组表示,项 [i][j] 的数值表示 i 到 j 的关系数据 |
{Array} data | [] | 通用 | 数据(详见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 }, ... ]
图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式):
itemStyle: { normal: { ... }, emphasis: { ... } }
其中normal和emphasis属性为对象,其包含:
名称 | 默认值 | 适用类型 | 描述 |
---|---|---|---|
{color} color | 图表各异 | 通用 | 颜色 |
{Object} lineStyle | 图表各异 | 折线图,K线图 ,地图 | 线条样式,详见lineStyle |
{Object} areaStyle | 图表各异 | 堆积折线图,地图 | 区域样式,详见areaStyle |
{Object} chordStyle | 图表各异 | 和弦图 | 弦样式,详见chordStyle |
{string} borderColor | '#fff' | 柱形图 | 柱形边框颜色 |
{number} borderRadius | 0 | 柱形图 | 柱形边框圆角,单位px,默认为0 |
{number} borderWidth | 1 | 柱形图 | 柱形边框线宽,单位px,默认为1 |
{Object} label | {show: true, position:'outer'} | 折线图,柱形图,K线图,散点图,饼图 ,地图,力导向 | 标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置
折线图,柱形图,K线图,散点图可指定position见下 |
{Object} labelLine | {show: true} | 饼图 | 饼图标签视觉引导线,默认显示 |
其中标签label属性为对象,其包含:
名称 | 默认值 | 描述 |
---|---|---|
{boolean} show | true | 标签显示策略,可选为:true(显示) | false(隐藏) |
{string} position | 'outer' | null | 标签显示位置,地图标签不可指定位置
饼图可选为:'outer'(外部) | 'inner'(内部), 折线图,柱形图,K线图,散点图默认根据布局自适应为'top'或者'right',可选的还有:'inside'|'left'|'bottom' |
{string | Function} formatter | null | 标签文本格式器,仅饼图支持,同Tooltip.formatter,不支持回调 |
{Object} textStyle | null | 标签的文本样式(详见textStyle) |
其中饼图标签视觉引导线labelLine属性为对象,其包含:
名称 | 默认值 | 描述 |
---|---|---|
{boolean} show | true | 饼图标签视觉引导线显示策略,可选为:true(显示) | false(隐藏) |
{number} length | 40 | 线长 ,从外圆边缘起计算,可为负值 |
{Object} lineStyle | 各异 | 线条样式,详见lineStyle |
通过有效设置itemStyle的normal和emphasis选项可实现个性化的显示策略,比如希望饼图文字标签默认隐藏,并在鼠标悬浮时通过一条红色的视觉引导线显示在饼图外部区域,可以如下设置:
itemStyle: { normal: { label: { show: false } labelLine: { show: false } } , emphasis: { label: { show: true, position: 'outer' } labelLine: { show: true, lineStyle: { color: 'red' } } } }
高度个性化:
线条(线段)样式
名称 | 默认值 | 描述 |
---|---|---|
{color} color | 各异 | 颜色 |
{string} type | 'solid' | 线条样式,可选为:'solid' | 'dotted' | 'dashed' |
{number} width | 各异 | 线宽 |
{color=} shadowColor | rgba(0,0,0,0) | 折线主线(IE8+)有效,阴影色彩,支持rgba |
{number=} shadowBlur | 5 | 折线主线(IE8+)有效,阴影模糊度,大于0有效 |
{number=} shadowOffsetX | 3 | 折线主线(IE8+)有效,阴影横向偏移,正值往右,负值往左 |
{number=} shadowOffsetY | 3 | 折线主线(IE8+)有效,阴影纵向偏移,正值往下,负值往上 |
区域填充样式
名称 | 默认值 | 描述 |
---|---|---|
{color} color | 各异 | 颜色 |
{string} type | 'default' | 填充样式,目前仅支持'default'(实填充) |
文字样式
名称 | 默认值 | 描述 |
---|---|---|
{color} color | 各异 | 颜色 |
{string} decoration | 'none' | 修饰,仅对tooltip.textStyle生效 |
{string} align | 各异 | 水平对齐方式,可选为:'left' | 'right' | 'center' |
{string} baseline | 各异 | 垂直对齐方式,可选为:'top' | 'bottom' | 'middle' |
{string} fontFamily | 'Arial, Verdana, sans-serif' | 字体系列 |
{number} fontSize | 12 | 字号 ,单位px |
{string} fontStyle | 'normal' | 样式,可选为:'normal' | 'italic' | 'oblique' |
{string | number} fontWeight | 'normal' | 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900 |
过渡显示,loading(读取中)的选项。try this »
名称 | 默认值 | 描述 |
---|---|---|
{string} text | 'Loading...' | 显示话术 |
{string | number} x | 'center' | 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) |
{string | number} y | 'center' | 垂直安放位置,默认为全图居中,可选为:'center' | 'bottom' | 'top' | {number}(y坐标,单位px) |
{Object} textStyle | null | 显示话术的文本样式(详见textStyle) |
{string} effect | 'spin' | loading效果,可选为:'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble' |
{object} effectOption | null | loading效果选项,详见zrender |
{number} progress | null | 指定当前进度[0~1],个别效果有效。 |
{Array}
['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6b8e23','#ff00ff','#3cb371','#b8860b','#30e0e0']
,默认颜色序列
{boolean | string} false,非IE8-支持渲染为图片,可设为true或指定图片格式(png | jpeg),渲染为图片后实例依然可用(如setOption,resize等),但各种交互失效
{boolean} false,是否启用拖拽重计算特性,默认关闭
{color} 'rgba(255,165,0,0.6)',拖拽重计算提示边框颜色
{color} '#ccc',可计算占位提示颜色
{string} ' & ',数据合并名字间连接符
{string} ' : ',数据合并名字与数值间连接符
{boolean} true,是否启用图表初始化动画,默认开启,建议IE8-关闭
{number} 2000,动画时长,单位ms,支持多级控制
{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'
简单的说,你可以通过这三级满足不同level的定制和个性化需求:
支持标准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', // 自定义扩展图表类型 ... } ]
查看更多实例 example,或者使用这个demo 或 ECharts单一文件引入作为你的模板
// 图表实例化------------------ // srcipt标签式引入 var myChart = echarts.init(document.getElementById('main')); // ajax getting data............... // 过渡--------------------- myChart.showLoading({ text: '正在努力的读取数据中...', //loading话术 }); // ajax return 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();