简介

ECharts，纯Javascript图表库，基于Canvas，底层依赖ZRender，商业产品常用图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。

名词解析

基本名词

图表名词

图表类型

图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：

单图表类型：line

折线图	堆积折线图	区域图	堆积区域图

单图表类型：bar

柱形图	堆积柱形图	条形图	堆积条形图

单图表类型：scatter

散点图	气泡图

单图表类型：k

K线图

单图表类型：pie

饼图	圆环图

单图表类型：radar（暂不支持）

雷达图	填充雷达图

单图表类型：map

中国地图

单图表类型：force

Webkit中的类依赖。

初始化

图表库实现为多实例的，实例选项在新建时传入，同时也可在实例新建后通过实例方法setOption（见方法）传入，两种初始化方式最终产出效果是等价的，即如下两组代码产出效果相同。

//初始化实例时传入选项
var myChart = new echarts(option);

//初始化实例选项为空，通过实例方法传入选项
var myChart = new echarts();
myChart.setOption(option);

同时，在实例中任何个性化选项不会影响其他已存在或未来生成的实例。

方法

选项

option

图表选项，包含图表实例任何可配置选项

legend

图例，每个图表最多仅有一个图例。try this »

dataRange

值域选择，每个图表最多仅有一个值域控件。try this »

toolbox

工具箱，每个图表最多仅有一个工具箱。

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，还原
}
                    

feature选项

• mark，辅助线标志
  • 简单传入true启动辅助线标志功能
  • 传入lineStyle（详见lineStyle）控制线条样式
• dataView，数据视图
  • 简单传入true启动数据视图
  • 传入{Object}设置更多属性
  • {boolean=} readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能
  • {Function=} optionToContent 自主编排数据视图的显示内容
  • {Function=} contentToOption 当数据视图readOnly为false时，会出现刷新按钮，如果是自主编排的显示内容，如何翻转也请自理
  • {Array=} lang 数据视图上有三个话术，默认是['Data View', 'close', 'refresh']，如需改写，可自定义
• magicType，图表类型切换，当前仅支持直角系下的折线图、柱状图转换
  • ['line', 'bar']

tooltip

提示框,鼠标悬浮交互时的信息提示。try this »

内容格式器formatter：

• {string}，模板（Template），其变量为：
  • {a} | {a0}
  • {b} | {b0}
  • {c} | {c0}
  • {d} | {d0} （部分图表类型无此项）
  • 多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
  • 其中变量a、b、c在不同图表类型下代表数据含义为：
    • 折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）
    • 散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
    • 饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）
• {Function}，传递参数列表如下：
  • <Array> params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...]
  • <String> ticket : 异步回调标识
  • <Function> callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html

触发类型：

item触发	axis触发

dataZoom

数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。try this »

grid

直角坐标系内绘图网格

xAxis

直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值。最多同时存在2条横轴，单条横轴时可指定安放于grid的底部（默认）或顶部，2条同时存在时位置互斥，默认第一条安放于底部，第二条安放于顶部。

坐标轴有两种类型，类目型和数值型（区别详见axis），横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型，具体参数详见axis。

yAxis

直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值。最多同时存在2条纵轴，单条纵轴时可指定安放于grid的左侧（默认）或右侧，2条同时存在时位置互斥，默认第一条安放于左侧，第二条安放于右侧。

坐标轴有两种类型，类目型和数值型（区别详见axis），纵轴通常为数值型，但条形图时则纵轴为类目型，具体参数详见axis。

axis

坐标轴有两种类型，类目型和数值型，他们的区别在于：

• 类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标
• 数值型：需要指定数值区间，坐标轴内包含数值区间内容全部坐标

下面是坐标轴的全部选项，其中个别选项仅在类目型或数值型时有效，请注意适用类型。try this »

boundaryGap端空白策略

设置	效果
boundaryGap: true
boundaryGap: false

scale策略

设置	scale: false	scale: true
效果

axis属性说明

axis.axisLine

坐标轴线，默认显示且带如下样式：

axis.axisTick

坐标轴小标记，默认不显示，默认样式见下：

axis.axisLabel

坐标轴文本标签选项

间隔名称格式器formatter：

• {string}，模板（Template），其变量为：
  • {value}: 内容或值
• {Function}，传递参数同模板变量：
  • eg：function(value){return "星期" + "日一二三四五六".charAt(value);'}

axis.splitLine

分隔线，默认显示且带如下样式：

axis.splitArea

分隔区域，默认不显示：

axis.data

类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，如:

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ..., 'Dec']

当需要对个别标签进行个性化定义时，数组项可用对象，接受textStyle设置个性化标签，如：

[
    'Jav', 'Feb', 'Mar',
     {
        value:'Apr',            //文本内容，如指定间隔名称格式器formatter，则这个值将被作为模板变量值或参数传入
        textStyle:{             //详见textStyle
            color : 'red'
            ...
        }
     },
    'May', '...'
]

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
    },
    ...
]

itemStyle

图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：

itemStyle: {
    normal: {
        ...
    },
    emphasis: {
        ...
    }
}

其中normal和emphasis属性为对象，其包含：

其中标签label属性为对象，其包含：

其中饼图标签视觉引导线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 »

lineStyle

线条（线段）样式

areaStyle

区域填充样式

textStyle

文字样式

loadingOption

过渡显示，loading（读取中）的选项。try this »

color

{Array}
['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6b8e23','#ff00ff','#3cb371','#b8860b','#30e0e0']
，默认颜色序列

calculable

{boolean} false，是否启用拖拽重计算特性，默认关闭

calculableColor

{color} 'rgba(255,165,0,0.6)'，拖拽重计算提示边框颜色

calculableHolderColor

{color} '#ccc'，可计算占位提示颜色

nameConnector

{string} ' & '，数据合并名字间连接符

valueConnector

{string} ' : '，数据合并名字与数值间连接符

animation

{boolean} true，是否启用图表初始化动画，默认开启，建议IE8-关闭

animationDuration

{number} 2000，动画时长，单位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'

多级控制设计

简单的说，你可以通过这三级满足不同level的定制和个性化需求：

• 通过 option.* 设置全局统一配置；
• 通过 option.series.* 设置特定系列特殊配置，其优先级高于 option 内的同名配置；
• 通过 option.series.data.* 设置特定数据项的特殊配置，最高优先级；

附录：一个直观的事例

查看更多实例 example

// 图表实例化------------------
var echarts = require('echarts');
require('echarts/chart/line');  // 图表按需加载，需要主动require
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();