ECharts v3.4官方版 附使用教程

ECharts是是echarts发布的一款3.4版本，新版本增肌了多种功能，界面也更加简洁，新增象形柱图、主题河流图、水球图三种新图表，优化了直角坐标系中数据全不显示时的显示效果。有需要的朋友可以下载体验哦！

ECharts特色

象形柱图

象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中，用于有至少一个类目轴或时间轴的直角坐标系上。

它既可以用图形的长宽变形表现数据，也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。

在下面的例子中，右边的两座山分别是一个图片，而最左侧的纸是由多个图片堆加成的，象形柱图会根据它们所在系列对应的数值，决定其高度。配合动画效果，能够实现很好的视觉效果。

在 ECharts 圣诞活动页中，我们制作了以下这个驯鹿和交通方式的速度对比图，这样的图表可以使用 ECharts 象形柱图方便地实现。下图包含两个系列，一个是显示在上方的交通方式矢量图标，象形柱图默认会将每个图标放在对应值所在位置的下方，通过 symbolSize 指定图标大小;另一个系列是显示在图标下方的山峰，在不指定 symbolSize 的情况下，将填充满所在的“柱子”，因而就有了图示效果。

除此之外，象形柱图还可以用同一图形的个数表现数值，实现类似 ECharts 圣诞活动页中一群小精灵的效果。因而象形柱图可以很大程度上满足信息图的制图需求。

主题河流图

主题河流图是一种特殊的流图，它主要用来表示事件或主题等在一段时间内的变化。

主题河流中不同颜色的条带状河流分支编码了不同的事件或主题，河流分支的宽度编码了原数据集中的 value 值。此外，原数据集中的时间属性，映射到单个时间轴上。

图中的每一个系列，可以是一个产品市场占有率的变化，也可以表示国家人口的变化等等事件或主题。

更多例子请前往官网例子查看。

水球图

水球图的使用方式非常简单，实现以下这样的效果，只需要将系列类型设为 liquidFill，并且指定数据即可。

水球图的个性化程度非常高，你可以为每个波指定波长、周期、相位、颜色、阴影、透明度等等属性，“水球”的形状可以是圆形、方形、三角形等等，甚至可以指定任意的 SVG PathData，因此可以制作出变化非常的效果。

ECharts使用教程

先来一个最简单的案例，实现一个条形图，代码我放在codepen哟，大家可以移步预览效果先。

预先准备好具有宽和高的网页元素，我们将用它绘制数据表。

然后我们导入Echarts类库，做好准备。

然后就是重头戏，我们来绘制数据表，首先配置路径，接着使用Echarts开始绘图。

// 路径配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('main'));

//设置数据

var option = {

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

重点是option里的设置，设置坐标轴、设置数据。

var option = {

//设置坐标轴

xAxis : [

{

type : 'category',

data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]

}

],

yAxis : [

{

type : 'value'

}

],

//设置数据

series : [

{

"name":"销量",

"type":"bar",

"data":[5, 20, 40, 10, 24, 20,24,32],

}

]

};

我们可以设置图标标题、图例、提示等，代码如下，效果如下图所示。

var option = {

//设置标题

title:{

text:'销量图',

subtext:'纯属捏造，如有雷同，人品爆发。'

},

//设置提示

tooltip: {

show: true

},

//设置图例

legend: {

data:['销量']

},

//设置坐标轴

xAxis : [

{

type : 'category',

data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]

}

],

yAxis : [

{

type : 'value'

}

],

//设置数据

series : [

{

"name":"销量",

"type":"bar",

"data":[5, 20, 40, 10, 24, 20,24,32],

}

]

};

加点料，来电混搭，直线图加上条形图，同时画平均线、提示最大最小值，同样代码放在codepen，移步 预览效果 先。

当我们需要混搭的时候，首先需要在require里加载需要使用的图库，然后在series里填写折线图的数据就可以了。代码如下，因为注释已经写得很清楚了，就不在啰嗦了，大家直接研究代码。

// 路径配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载

'echarts/chart/line'

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('main'));

//设置数据

var option = {

//设置标题

title:{

text:'销量图',

subtext:'纯属捏造，如有雷同，人品爆发。'

},

//设置提示

tooltip: {

show: true

},

//设置图例

legend: {

data:['销量']

},

//设置坐标轴

xAxis : [

{

type : 'category',

data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]

}

],

yAxis : [

{

type : 'value'

}

],

//设置数据

series : [

//条形图

{

"name":"销量",

"type":"bar",

"data":[5, 20, 38, 10, 24, 20,24,32]

},

//折线图

{

"name":"销量",

"type":"line",

"data":[5, 20, 38, 10, 24, 20,24,32],

//绘制平均线

markLine : {

data : [

{type : 'average', name: '平均值'}

]

},

//绘制最高最低点

markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

}

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

更新内容

[+] map series 可以使用用户指定的 geo 坐标系 了(原先是只能使用内置的 geo 坐标系)。从而，geo 坐标系可以使用 map series 控制自身的颜色，并且 map series 可以和其他类型的 series(如 scatter series)共享 geo 坐标系。参见 series-map.geoIndex。

[+] 增加了 focusNodeAdjacency action，从而能用 API 控制 graph 的连接高亮。

[+] 增加了 series-pie.animationType，支持不同的饼图动画效果。

[+] animationDuration 增加了回调函数支持，可以根据不同的数据项得到不同的动画时长。

[+] category axis 支持了 min max 的设置。

[+] category axis 默认情况会显示所有的类目，不论是否有类目中没有数据(原先两端的没有数据的类目不会被显示)。

[+] singleAxis 中的 data 支持了一维数组的数据格式，如 [11, 23, 44]。

[+] dataZoom 支持了 singleAxis。

[+] 开放了 throttle 工具方法：chart.util.throttle。

[+] 优化了 直角坐标系 中数据全不显示时的显示效果。

[+] K 线图 支持了 barWidth，barMinWidth，barMaxWidth 设置。参见 #4783。

[+] 线图 支持了 symbol, symbolSize 设置。

[+] 支持了 visualMap-piecewise 中数据标签和首尾的文本同时显示。参见 visualMap-piecewise.showLabel 参见 #4845。

[+] 支持了 visualMap 支持系列中的某些数据不受 visualMap 控制。

[^] 在 showTip 事件中开放了 dataIndex 参数。

[^] 修复了 tooltip 中的 XSS 隐患。参见 #4769。

[^] 修复了 series-graph.edgeLabel 中部分属性无效的问题。参见 #4555。

[^] 修复了 series-gauge 中 min max 是 stirng 时的 tick 渲染问题。参见 #4617。

[^] 修复了 series-gauge.pointer.show 的问题。参见 #4618。

[^] 修复了 series-radar 在无数据时渲染可能抛错的问题。

[^] 修复了 markArea.label.normal.show 的问题。参见 #4723。

[^] 优化了 log 数轴 中，数据小于等于 0 时的处理。参见 #4743 和 #3161。