Home
Table of Contents generated with DocToc
- ECharts共支持12类图表和10个组件。
- 图表包括：柱状图（Bar）、折线图（Line）、散点图（Scatter）、K线图（K）、Pie（饼图）、雷达图（Rador）、和弦图（Chord）、力导布局图（Force）、地图（Map）、仪表图（Gauge）、漏斗图（Funnel）、孤岛（island）;
- 组件包括：坐标轴（Axis）、网格（Grid）、极坐标（Polar）、标题（Title）、提示（Tooltip）、图例（Legend）、数据区域缩放（DataZoom）、数据漫游（DataRange）、工具箱（ToolBox）、时间轴（TimeLine）。
- 官网上ECharts的架构图中显示了组件的分层，但其实组件间并没有完全的直接相互依赖，例如：只有直角系的四个图表依赖axis和grid，只有雷达图依赖极坐标polar。
- 支持用户修改图表中的数据：拖拽重计算、数据视图
- 帮助用户进行信息筛选：数据区域缩放功能、值域漫游
- 支持用不同的方式解读同样的数据：动态类型切换、多图联动、多维度堆积、混搭
- 请戳 changelog
- 有三种方式引入ECharts。请戳 官方文档
类型 特点 适用于 模块化包引入 文件未被合并压缩，所有的错误能立刻定位到出错的地方。可参考demo 模块化开发，AMD规范，开发阶段使用 模块化单文件引入 上线时通过自动化工具根据依赖关系把需要的模块组件重新打包成文件，是连解压缩好的单文件。例子见ECharts单一文件引入 模块化开发，AMD规范，上线时使用 标签式单文件引入 采用srcipt标签式引入，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入 项目本身并不是基于模块化开发的，或者是基于CMD规范 - 总结来说，模块化引入ECharts，需要如下4步：
- 引入一个模块加载器esl.js或者require.js
- 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
- 为模块加载器配置echarts的路径，从当前页面链接到echarts.js
- 动态加载echarts然后在回调函数中开始使用
- 使用init函数，根据引入方式的不同在合适的时机通过ec接口调用。请戳官方文档 初始化。
-
问题描述：在ie8浏览器下查看demo发现toolbox位置出现一条浅蓝色的蓝条遮挡主了功能按钮。但切换Firefox时未出现问题。
-
问题探究：是否引用了其他css样式？
-
问题定位：【<!DOCTYPE> 类型的设置】例子中用的是 j2ee采用的是jsp页面 按照这样设置在文件头之后问题得到了解决
- Q: Formatter是万金油，可以实现高度个性化的需求，哪些地方支持formatter？
- A: Formatter是做文本格式化用的。因为不可能内置文本显示来满足所有的需求，所以利用formatter来进行个性化的定制则显得尤为重要和灵活。formatter不仅能满足格式要求，还可用于满足图形化的需求。
最常应用的地方有：
tooltip、axisLabel、itemStyle.*.label.formatter。
tooltip中的formatter比较特殊，因为tooltip是一个dom，formatter返回的是一个html片段，也因为是html片段，所以形式可以相当灵活，你可以返回一个表格、一张图片、甚至嵌入一个iframe去引用另外一个页面。同时formatter支持function，能用function的地方你基本就可以为所欲为，不仅做图形图像的处理，还可以利用这个回调做些额外的业务逻辑，比如计算、上传数据、调用自己的方法获取额外的显示内容（ajax）等等。
可以利用formatter个性化x/y轴上的label显示，比如：格式化为多少多少万，多少多少度
(1) 利用模板
axisLabel:
{
formatter: '{value} °C'
}
(2) 利用函数
function(value){
return Math.round(value)+"万";
}
- Q: tooltip在使用echarts的过程中，出现tooltip中的内容格式器formatter，地图 : a（系列名称），b（区域名称），c（合并数值）, d（无）。地图C合并数值，目前是否有方法能提取出非合并数值？
- A: 这是一个地图的tooltip格式化相关问题，其实就是解决“如何在formatter中获取回调参数以外的数据？”的问题。Option在手，通过name就能从各个series里取出来，以map1为例：
formatter:function(params) {
var res = params [1] +'</br>All：'+ params[2] +'</br>';
//get series
var series = myChart.getOption().series;
//get data in series[i]
for(var i=0; i<myChart.getOption().series.length;i++){
var dataArr = series[i].data;
for(var j=0;l = series[i].data.length,j<l;j++) {
if(dataArr[j].name == params[1]){
res+=series[i].name+':'+dataArr[j].value+'</br>'
}
}
}
return res;
}
效果如图所示：
- Q:highchar上面只需要设置一个起始时间点和间隔的粒度，X时间轴上会自动的根据数据来显示，echart是否也有这种设置，不必要每一个点都指定时间？
- A:ECharts没有内置时间数据格式化等相关逻辑，在我们设计初衷这属于数据层的问题，数据驱动图表而不希望依赖图表格式化数据，虽然使用起来没hc那么爽，但这样分层会更加灵活和通用，利用一个function就可以搞定,像hicharts那样自动解析成日期格式。
再比如，格式化为时间格式
xAxis : [
{
axisLabel : {
formatter: function (timestamp) {
var d = new Date(timestamp);
//设置
var s = d.getMonth() + '月' + d.getDate() + '日';
return s;
}
}
}
]
- Q:ECharts能否支持如下功能，当点击图形上某个点的时候，通过事先在图形上设置的参数，能够实现点击图形上的某个点，跳转到一个具体的页面上，从而实现直接通过点击图形的 异常点，进入数据分析页面，提高定位问题的效率。
- A:Echarts有事件，响应点击事件就行，回调参数足以区分确定url链接参数。
//模块化引入方式
var ecConfig = require('echarts/config');//标签是引用方式：var ecConfig = echarts.config;
//callback function
function jumpToAnalyse(param) {
window.open("http://www.baidu.com?time="+param.name)
}
//bind event
myChart.on(ecConfig.EVENT.CLICK, jumpToanalyse);
事件参数param的结构如下图
- Q:在给定的dom元素相对较小的情况下，如何生成图表能够按比例填充四周，看起来更加饱满一些?
- A:使用grid，见文档。x,x2,y,y2都支持百分比和固定值,如下图所示
- ec的大多数组件都可以自由灵活的布局和定位，通过对x（'center'|'left'|'right'（number）），y('top','bottom','center'(number))以及textAlign（'left','right','center'）属性进行设置可以把页面划分为9个区域，将组件定位在任意一处。x和y除了支持语义文本外，还支持传入数值做绝对定位，比如：{x:100, y:100}。有个别组件还能支持百分比,例如，x：‘10%’ 代表横向定位在总宽度*10%的位置。注意js数据类型没有‘10%’百分比这一说，设置时是字符串，内部逻辑会处理为百分比。
- Q: 函数的第二个参数是干什么的？
- A: setOption函数的第二个参数是一个Boolean值，代表notMerge，用来做差异合并。差异合并指的是默认进行merge操作，只改变希望改变的，没有传参设置的部分使用上一次的值。如果不需要差异合并，可以通过notMerge参数为true阻止与上次option的合并。有些场景确实需要notMerge，比如当两次操作的数据长度不一时，默认第二次传入的数据会跟上一次的merge，这时如果第二次的数据比第一次的长倒是没事，如果短了，那么假设第一次你给ec传了10个数，但原来是20个数，最终产出就是第二次的10个加上第一次的后10个。
- Q: 如何动态增加标注？
- A: 使用addMarkPoint函数，共有两个参数，第一个参数是seriesIdx 系列索引(Number) ,第二个参数是标注的数据内容数组，详细参见series.markPoint以及series.markPoint.data。
- 饼图、雷达图、力导、和弦图中
最直接的数据项可直接指定标注位置（x，y）以及相关名称（name）和值（value）
myChart.addMarkPoint(0,{data:[{type:'max',}]})- 直角坐标系的图表如折线、柱形、K线、散点图
- 通过直接指定位置外，如果希望标注基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算
- 饼图、雷达图、力导、和弦图中
var markPoint= {
symbol: 'heart',
symbolSize: 12,
effect: {
show: true,
loop: true,
period: 15,
scaleSize: 2,
color: null,
shadowColor: null,
shadowBlur: 0
},
itemStyle: {
normal: {
label: {
show: false
}
}
},
data: [
{
name: 'age',
value: '45',
x: 700,
y: 400
}
]
}
myChart.addMarkPoint(0,markPoint);
 - 可以直接使用如下几个开箱即用的特殊点标注
myChart.addMarkPoint(0,{
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
})
```
- 地图
标注数据比较特殊也最为常用的地图上，除了直接位置定位外，如果希望基于地理坐标标注，并且能够随地图漫游缩放，需要为markPoint提供一份geoCoord。
- Q:如何动态增加标线？
- A:使用addMarkLine函数，第一个参数是seriesIdx 系列索引(Number) ,第二个参数是标线对象，是一个二维数组。具体参见SeriesMarkLine以及SeriesMarkLine.data
- 饼图、雷达图、力导、和弦图
标线的数据内容数组，最直接的数据项可直接指定标线起始和结束位置（x，y）以及相关名称（name）和值（value），数组第一层表示有几条markline,第二层表示每一条markline的起点和终点。 - 直角坐标系的图表如折线、柱形、K线、散点图
- 标线可基于直角系的定位，通过xAxis，yAxis实现，这两个值都会根据坐标轴类型以及传入参数的不同自动换算。
- 支持直接使用几个开箱即用的特殊点作为标线，支持最大（小/平均）值水平线或垂直线
myChart.addMarkLine(0, { data : [ [ {xAxis:0,yAxis:2200}, {xAxis:10,yAxis:2300} ] ] });
- 地图
如果希望基于地理坐标标线，并且能够随地图漫游缩放，需要为markLine提供一份geoCoord。
- 饼图、雷达图、力导、和弦图
var markLine = { smooth:true, effect:{ show: true, scaleSize: 1.5, period: 1.5, color: '#fff' }, itemStyle : { normal: { borderWidth:1, color: 'gold', lineStyle: { type: 'solid' } } }, data : [ [ {name:'上海', geoCoord:[121.4648,31.2891]}, {name:'东莞', geoCoord:[113.8953,22.901]} ] ] } myChart.addMarkLine(0,markLine) ```
- Q: 视图大小发生变化图表会自动响应吗？
- A： ec并没有直接响应区域大小的变化从而自动resize，为了优化内存，echarts提供响应dom变化这个能力（resize 方法），使用方根据自己的需要在合适的时机调用即可，如果他不需要就不调用，什么事都没发生。如果你想让线图自适应屏幕大小，那么使Div自适应，然后根据你业务需求在你认为合适的时机调用实例的resize方法就行，通常可以绑定到window.resize上。
- Q: clear和dispose的区别？
- A: clear：图表清空，清空后实例可用;dispose：图表释放，释放后实例不再可用 ===
- option可归纳为公共选项,组件选项,数据选项三类。
- 一个完整的option中，除数据选项是必须外，另外两种选项可选：公共选项如果不传入就默认使用conifg里的标准属性；组件选项和公共选项不同，组件选项如果不传入就是不使用这个组件，如果传入则会将传入的每一项配置跟config进行merger。另外，ec支持主题，所谓的主题就是一个更高优先级的config。所以最终的'option = coinfg + theme + 传入的option'，优先级就是越往后越高。
- option跟图像内容的一一对应
- 标志图形类型（循环使用）SymboList
SymbolList：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | - 大多用在series数据表示+线段节点上
比如：数据标线的端点、数据标点、折线图，散点图、时间轴当前点、力导图的两端。 文档里提到Symbol还支持五种特别的标志图形：’heart(心形)’、’droplet(水滴)’、’pin(标注)’、’arrow（箭头）’、’star(五角星)’，star可以变换为你想要的n角星,例如’start6’就是六角星，这里n要大于等于3才行。另外Symbol从1.3.5开始支持自定义图片，格式为’image://’+’图片路径’。Symbol配合的好的话，可以做出很精美的东西，比如墨迹天气气温变化曲线上的symbol用锐角三角表示风向或者气象。
- Q: 孤岛是如何生成的？
- A: 孤岛是一个特殊的图表，他不能直接生成，而是通过拖拽重计算,把数据拖拽到不被图表接收的空白处而得到的。比如，把某个扇形拖出饼图，被拖出数据成为一个“数据孤岛”，饼图内剩下的数据会重新计算成一个完整的饼图；被拖出的“数据孤岛”可以随时拖拽回去融入饼图，或者可以拖拽到某个扇形上，产生数据的合并。
- Q:比如我需要一个混搭图表，只希望直角系处在图表的右侧并且只占据一半的显示空间（宽度一半，满高度）？
- A:利用grid的x指定百分比就行了
grid:{
x:'50%'
}
- 坐标轴有两种类型，类目型和数值型，他们的区别在于：
- 类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标。
- 数值型：需要指定数值区间，坐标轴内包含数值区间内容全部坐标。
- dataZoom 可以用到直角系内，但前提是必须作用在类目轴上，我们如果想在散点图上用dataZoom，只能让其中一个维度映射到类目上。实例请戳：scatter5
- 网格由三部分组成： grid、splitLine和splitArea。
- grid的边框是网格外轮廓
- 横纵轴的splitLine（间隔线）和splitArea（间隔阴影）是内部网格，这两个属性都会受到splitNumber的影响（间隔数），通过show控制显示，color都支持rgba，所以也可以通过设置透明色实现隐藏（或者间隔隐藏），而且这两属性都支持颜色数组实现间隔区分，可以做出很具特色的图表（比如区间渐变）。
- scale用来脱离0值聚焦到真实数据的min、max区间。
- 另外一种方式就是直接指定min、max。min、max传的是数值，不是字符串噢！
- 通过axis.boundaryGap选项控制，如
yAxis: [ { boundaryGap:[0.05,0.05] } ]，这个值没做百分比转化，要求是用一个小于1的数代表百分比，所0.05值得就是5%，不转化为百分比理解也行，可以理解为最终的max = 数值max * （1 + 0.05） 。 专业的图表有这个讲究，就是不顶天不立地（上下留空），让折线显示在直角系的中部并占据80%左右的空间，最多0.1=10%就很多了，5%左右就很好看。
- 第一种：barGap：’-30%’或是设置成负的值-30。
- 第二种：barCategoryGap:'100%', 设置成’0%’也可以的。
- barGap是多个系列间柱形的间距，支持负值，那个覆盖的小效果就是一个负值实现的。
- barCategoryGap是类目间距，可以控制柱形在类目间的距离。你会发现当barCategoryGap设置很大效果就跟设置为0一样了，主要原因是当无法满足用户设定时将忽略这个设置并用0取替。
- 结合原理理解
if (large && dataLength > 2000) {
大规模模式
}
else {
普通模式
}
- 当缩放到少于阀值时就没必要还用大规模模式了。
### 饼图
#### 如何控制饼图的显示位置和大小？如果需要在一个长方形区域内同时左右对称的显示两个饼图改怎么设置？
- 通过series.center选项定位圆心来控制位置(可以是'..%',数)
- 通过series.radius选项设置半径来控制大小(可以是'..%',数)
- 在一个长方形区域内同时左右对称的显示两个饼图:
将两个饼图的center的第一个分量分别设置成"x%"和"(100-x)%":两个百分数相加等于1就行，例如：
`series : [{center : ['25%', '50%'],}{center : ['75%', '50%'],}] `
- 通过位置和半径的配合就能做出嵌套饼图、环形图。
#### 饼图如何变成环形图？如何变成南丁格尔玫瑰图？玫瑰图有几种模式？在数值影射到图形上有什么区别？
- 在radius属性中设置：传输组实现环形图，[内半径，外半径]
- 设置series.roseType选项即可变成南丁格尔玫瑰图
- 玫瑰图有两种模式-'radius'（半径模式） | 'area'（面积模式）
- 两种模式在数值影射到图形上的区别是：
- 'radius':角度还是百分比的占比，只是加上把数据到半径的映射，所以视觉（面积）上是放大了比例的，可以有突出显示的效果。radius是半径模式。
- 'area'：角度是相等的，数值被映射为半径的开方，面积比例跟数据比例是对应的，但人眼并不能很好的比较出面积大小的区别，所以面积模式的玫瑰图一般建议先对数据做好排序以便直接比较。Area是面积公式。
#### 饼图的标签文本可以显示到什么地方？通过什么配置控制？如何让文本标签显示为百分比数值？
- 饼图的标签文本可以显示到内部、外部和中心.
- 通过position选项控制（'outer'外部，'inner'内部，'center'中心）
- 通过formatter可使文本标签显示为百分比数值,如：
itemStyle :
{
normal :
{
label :
{
formatter :
function (seriesName, dataName, dataValue, percent) {
return ....
}
},
}
}
雷达图
如何控制雷达图的位置和大小？怎么让雷达图的数据多边形连线变成虚线？怎么变成填充雷达图？
- 通过polar.center选项定位圆心来控制位置
- 通过polar.radius选项设置半径来控制大小
- 通过series.data.itemStyle.normal/emphasis.lineStyle.type来控制选项多边形连线,设为dashed即为虚线。
- 通过series.data.itemStyle.normal/emphasis.areaStyle控制填充。
仪表盘
如何控制仪表盘的位置和大小？
- 通过series.center选项定位圆心来控制位置
- 通过series.radius选项设置半径来控制大小
===
漏斗图
如何控制漏斗图的位置和大小？min/max/minSize/maxSize怎么理解？
- 通过
series.x/y/x2/y2控制漏斗图的位置和大小,也可通过series.width/height来控制大小
- minSize/maxSize控制的是漏斗图最大最小值占到总宽度的比例，min/max 控制的是最大最小值。
- min、max好理解就是数值大小。
minSize、maxSize默认是0,100%时，与上图一样，代表的是数值映射到总宽度的比例。
- 如果需要最小值的图形并不是尖端三角，可设置minSize实现
这样的好处是当做图表拼接和计算尖端。
比如在上面这个图下面接下一个漏斗图，两个图的宽度一致的，这样下面一个漏斗的maxSize设置为20%，等于上一个的minSize就接起来了。
===
力导图
力导向布局里各个参数对布局结果有什么影响？调整 gravity 和 scaling 两个参数对布局的效果有什么区别？
- 力导图布局的算法很直白，就是通过对物理的模拟，任意两个节点之间存在一个斥力，任意一条边会对邻接节点存在一个引力。
每次迭代的时候，就会计算一次所有节点的受力，然后算出速度之后更新它的位移，迭代到一定次数之后每个节点的受力会趋向平衡，就会形成一个大致的形状。
- 直观上来讲，scaling 越大整个图最后稳定下来的时候就越大；gravity 越大所有节点受到的向心力也越大，最后图稳定下来的时候就越小。但是如果试一下的话可以发现在把 scaling 参数调小的时候，不光是节点往中心靠拢了，节点之间也更加靠拢了。
- 向心力的中心是通过 center 参数指定的，配合 center 和 scaling 可以实现力导向和饼图等的混搭。
===
地图
ECharts内置支持多少种地图类型？什么是子区域模式？加上子地图类型一共能支持多少内置地图类型？
- 地图内置支持world，china及全国34个省市自治区（省市自治区的mapType直接使用简体中文）。
- 子区域模式是指，通过主地图类型扩展出所包含的子区域地图，格式为’主地图类型|子区域名称'
- 加上子地图类型大概支持780+个地图类型：world+china+34个省市自治区+226个国家子地图+中国34个省市子地图+ +15（安平均15个市区每省市计算）*34个市区子地图~ 780+个。
- 子地图作为图形辅助型功能在增强视觉表现和记忆方面很有帮助，比如做出这样的应用
什么场景下使用mapValueCalculation？
- mapValueCalculation:’sum’地图数值计算方式，默认为求和，可以选择为’sum(总数)’|’average(均值)’
- 在有多个series的情况下，需要显示它们的平均值时需要mapValueCalculation，如显示3天的平均销量等。
nameMap怎么用？常用在什么场景下？textFixed和geoCoord参数有什么用？
- nameMap用于自定义地区的名称的映射
- 使用场景：
- 默认地名不满足需求下需要个性化地名。
- 将不同的国家地区，映射成同一个名称的话，可以看作一个group（像金砖四国，北约国家之类的）。
- 国际化语言转换。
- textFixed：地区的名称文本位置修正，对于少量的文本进行修改，比如北京、天津的位置挨着，不好区分，可以分别指定显示位置。数值单位为像素（区别于geoCoord，后者是用经纬度坐标，来定位需要进行文本标注的位置）
如何指定特定区域的填充颜色？怎么指定启用selectedMode后的选中填充颜色？
- 使用
series.data.itemStyle.normal.areaStyle.color指定特定区域颜色，如：
series[
{
data: [
{
name: '新疆',
itemStyle: {
normal: {
areaStyle: {
color: '#fff'
},
}
},
}
]
}
]
可使选中后为透明
如何用标签式引入的方式引入echarts并扩展出地图类型?
- 扩展方式应该是 echarts.util.mapData.params.params.xx = {…}
<script type="text/javascript" src="echarts-plain-original-map.js"> </script>
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
echarts.util.mapData.params.params.UK = {
getGeoJson: function (callback) {
$.getJSON('UK_geo.json',callback);
}
}
...
</script>
拓展地图数据的方法
黄平找到一种自己拓展地图的方法了，刚刚试着转换了一次，数据格式是对的。推广一下。
- 首先用arcmap将shp转换为json格式
-
http://esritogeo.herokuapp.com/ 将得到的json文件到这个网址上去转换为geojson格式。
一些提问与反馈
关于Option设计
-
Q: legend为什么还要单独有一个data属性。为什么不直接让它的默认等于series.data里面的name？
-
A: echarts还是demo时确实是这样做的，但使用发现局限性更大，包括多系列数据时的重复，类目自动生成，格式化等等，涉及到交互后就更多局限了。这种抽取其实很简单，如果你的需求基本稳定，完全是可以自己封装一层做数据上的格式化。
同样的解析适合categoryAxis为啥需要个data而不是让series里的data换成json格式自动抽取，1个系列看起来美好，多个系列后就变得冗余和不灵活了。
Linux下的动画支持
- Q: 1.4的不支持linux下边的firefox浏览器？请问怎么解决?
- A: Linux下firefox 动画支持有问题，把animation设置为false就行
横坐标数据全部显示
- Q: 如果横向坐标轴数据太多,则会隐藏某些数据,可不可以让他上下错开显示 而不是隐藏呢？
- A: axisLabel ，interval为0全部显示，formatter通过间隔换行（加入’\n’）就可以了，如下图所示
不支持上下标字体
- Q:在使用echart的过程中，想在坐标轴的参数name上标记该坐标轴的单位，比如平方米（m2）,是否允许该表示平方的2，表示为上标。Echart是否支持这种显示？
- A: 不支持上下标字体
是否考虑图表多轴
- Q:工业上经常使用多坐标轴趋势图。以便应付一幅趋势图上的变量拥有不同的量纲。Echart是否有计划支持多轴?
- A: 虽然业界有很多支持，但直角系下多轴显示并不被认为是个好的表现形式，主要是线与轴的关联思维成本太高了，目前echarts最多支持4轴，同方向2轴，已经用满了直角系的四个方向，我们没计划增加。其实在我们的使用中发现，经过数据层面的预处理，其实1条轴足以同时表现任意多不同量纲的的数据，axisLabel的formatter能力是很强的，可以试试数值映射在同一轴上。