2014-01-02
大数据时代，重新定义数据图表的时候到了
以上是 ECharts官网中的口号。
最近的echarts版本是1.3.5，在github下载、解压之后，结构如下：
├─build
│ └─wrap
├─doc
│ ├─asset
│ │ ├─css
│ │ ├─ico
│ │ ├─img
│ │ │ ├─doc
│ │ │ └─example
│ │ └─js
│ │ └─esl
│ ├─example
│ │ ├─geoJson
│ │ ├─topic
│ │ │ ├─10-me-china
│ │ │ │ └─js
│ │ │ └─24-population-china
│ │ │ └─js
│ │ ├─www
│ │ │ └─js
│ │ └─www2
│ │ └─js
│ └─slide
│ ├─css
│ │ ├─print
│ │ └─theme
│ │ ├─source
│ │ └─template
│ ├─img
│ ├─js
│ ├─lib
│ │ ├─css
│ │ ├─font
│ │ └─js
│ └─plugin
│ ├─highlight
│ ├─markdown
│ ├─multiplex
│ ├─notes
│ ├─notes-server
│ ├─postmessage
│ ├─print-pdf
│ ├─remotes
│ ├─search
│ └─zoom-js
├─src
│ ├─chart
│ ├─component
│ └─util
│ ├─mapData
│ │ ├─geoJson
│ │ └─rawData
│ │ └─geoJson
│ ├─projection
│ └─shape
└─test
└─allchart
这些文件其实也就是 http://echarts.baidu.com/ 的本地化版本。
官网的大部分示例并不完整（或者说是，示例并非简单而清晰），这里力求简单清晰。我们以力导向布局图为例。
首先将/doc/asset/js/esl/esl.js复制到/build目录下，建立目录/me。
http://echarts.baidu.com/doc/example/force1.html 是一个以Steve Jobs为中心的人物关系图。我们在/me目录下建立文件force1.html，其内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>乔布斯</title>
<script src="../build/esl.js"></script>
<script>
require.config({
paths:{
echarts:'../build/echarts',
'echarts/chart/force': '../build/echarts'
}
});
require(
[
'echarts',
'echarts/chart/force'
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: '人物关系：乔布斯',
subtext: '数据来自人立方',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
legend: {
x: 'left',
data:['家人','朋友']
},
series : [
{
type:'force',
name : "人物关系",
categories : [
{
name: '人物',
itemStyle: {
normal: {
color : '#ff7f50'
}
}
},
{
name: '家人',
itemStyle: {
normal: {
color : '#87cdfa'
}
}
},
{
name:'朋友',
itemStyle: {
normal: {
color : '#9acd32'
}
}
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#800080'
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.4)',
lineWidth : 8
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
r: 30
},
linkStyle : {}
}
},
minRadius : 15,
maxRadius : 25,
density : 0.05,
attractiveness: 1.2,
nodes:[
{category:0, name: '乔布斯', value : 10}, //0
{category:1, name: '丽萨-乔布斯',value : 2}, //1
{category:1, name: '保罗-乔布斯',value : 3}, //2
{category:1, name: '克拉拉-乔布斯',value : 3}, //3
{category:1, name: '劳伦-鲍威尔',value : 7}, //4
{category:2, name: '史蒂夫-沃兹尼艾克',value : 5}, //5
{category:2, name: '奥巴马',value : 8}, //6
{category:2, name: '比尔-盖茨',value : 9}, //7
{category:2, name: '乔纳森-艾夫',value : 4}, //8
{category:2, name: '蒂姆-库克',value : 4}, //9
{category:2, name: '龙-韦恩',value : 1} //10
],
links : [
{source : 1, target : 0, weight : 1},
{source : 2, target : 0, weight : 2},
{source : 3, target : 0, weight : 1},
{source : 4, target : 0, weight : 2},
{source : 5, target : 0, weight : 3},
{source : 6, target : 0, weight : 6},
{source : 7, target : 0, weight : 6},
{source : 8, target : 0, weight : 1},
{source : 9, target : 0, weight : 1},
{source : 10, target : 0, weight : 1},
{source : 3, target : 2, weight : 1},
{source : 6, target : 2, weight : 1},
{source : 6, target : 3, weight : 1},
{source : 6, target : 4, weight : 1},
{source : 6, target : 5, weight : 1},
{source : 7, target : 6, weight : 6},
{source : 7, target : 3, weight : 1},
{source : 9, target : 6, weight : 1}
]
}
]
};
myChart.setOption(option);
}
);
</script>
</head>
<body>
<div id="main" style="height:500px;width:600px;"></div>
</body>
</html>
效果图如下：
也可以到 http://echarts.baidu.com/doc/example/force1.html 体验一下。
esl.js是一个Browser端标准加载器，require.config用来设置加载内容，重点在require()的第二个参数。该参数是一个回调函数，var myChart = ec.init(document.getElementById('main'));是选中
<div id="main" style="height:500px;width:600px"></div>
并初始化echarts。option变量用来设置图表的参数（例如标题、数据等）， 并作为myChart.setOption()函数的参数。option的形式和json一致，如此也就很容易实现刷新图表了。
如果不习惯使用esl.js，那么可以使用标签式引入这一方式（/me/force2.html）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>乔布斯</title>
<script src="../build/echarts-plain-map.js"></script>
</head>
<body>
<div id="main" style="height:500px;width:600px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '人物关系：乔布斯',
subtext: '数据来自人立方',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
legend: {
x: 'left',
data:['家人','朋友']
},
series : [
{
type:'force',
name : "人物关系",
categories : [
{
name: '人物',
itemStyle: {
normal: {
color : '#ff7f50'
}
}
},
{
name: '家人',
itemStyle: {
normal: {
color : '#87cdfa'
}
}
},
{
name:'朋友',
itemStyle: {
normal: {
color : '#9acd32'
}
}
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#800080'
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.4)',
lineWidth : 8
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
r: 30
},
linkStyle : {}
}
},
minRadius : 15,
maxRadius : 25,
density : 0.05,
attractiveness: 1.2,
nodes:[
{category:0, name: '乔布斯', value : 10}, //0
{category:1, name: '丽萨-乔布斯',value : 2}, //1
{category:1, name: '保罗-乔布斯',value : 3}, //2
{category:1, name: '克拉拉-乔布斯',value : 3}, //3
{category:1, name: '劳伦-鲍威尔',value : 7}, //4
{category:2, name: '史蒂夫-沃兹尼艾克',value : 5}, //5
{category:2, name: '奥巴马',value : 8}, //6
{category:2, name: '比尔-盖茨',value : 9}, //7
{category:2, name: '乔纳森-艾夫',value : 4}, //8
{category:2, name: '蒂姆-库克',value : 4}, //9
{category:2, name: '龙-韦恩',value : 1} //10
],
links : [
{source : 1, target : 0, weight : 1},
{source : 2, target : 0, weight : 2},
{source : 3, target : 0, weight : 1},
{source : 4, target : 0, weight : 2},
{source : 5, target : 0, weight : 3},
{source : 6, target : 0, weight : 6},
{source : 7, target : 0, weight : 6},
{source : 8, target : 0, weight : 1},
{source : 9, target : 0, weight : 1},
{source : 10, target : 0, weight : 1},
{source : 3, target : 2, weight : 1},
{source : 6, target : 2, weight : 1},
{source : 6, target : 3, weight : 1},
{source : 6, target : 4, weight : 1},
{source : 6, target : 5, weight : 1},
{source : 7, target : 6, weight : 6},
{source : 7, target : 3, weight : 1},
{source : 9, target : 6, weight : 1}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
有两点要注意：
1、设置的js代码必须在dom加载完成后执行，否则会有错误：Uncaught TypeError: Cannot set property 'innerHTML' of null 。将这段js代码放在
<div id="main" style="height:500px;width:600px"></div>
之后是一个解决方法。
2、示例 http://echarts.baidu.com/doc/example/www2/index.html 导入相关js代码如下：
<!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
<script src="js/echarts-plain-map.js"></script>
在 http://echarts.baidu.com/doc/doc.html 也有代码如下：
< script src="example/www2/js/echarts-plain.js" > < /script>
< script >
var myChart = echarts.init(domMain);
var option = {
...
}
myChart.setOption(option);
< /script>
但在我的使用中，如引入echarts-plain.js，即:
<script src="../build/echarts-plain.js"></script>
会有以下错误：
Uncaught Error: No echarts/util/mapData/params echarts-plain.js:84
Uncaught ReferenceError: echarts is not defined
该问题已经提交到：https://github.com/ecomfe/echarts/issues/174