WeX5快速集成Echarts
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
WeX5如何快速集成Echarts呢？我们先来看看集成后的运行效果，如下图：
集成步骤如下：
第一步：下载Echarts资源;
https://github.com/ecomfe/echarts/archive/2.2.1.zip
第二步：将Echarts资源复制到/UI2/demo/misc/echarts目录;
只需要复制Echarts中build后的结果，复制后的目录结构如下：
其中/UI2/demo/misc/echarts/dist是Echarts压缩后的结果, 用来发布使用，/UI2/demo/misc/echarts/source是Echarts源码，用来开发调试使用。
第三步：创建w文件，并在相应的js文件中引用Echarts
/UI2/demo/misc/echarts/demo.w文件内容如下：
|
1
2
3
4
5
6
7
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
div
xmlns
=
"http://www.w3.org/1999/xhtml"
xid
=
"window"
class
=
"window"
component
=
"$UI/system/components/justep/window/window"
design
=
"device:pc"
>
<
div
component
=
"$UI/system/components/justep/model/model"
xid
=
"model"
onLoad
=
"modelLoad"
/>
<
div
xid
=
"main"
style
=
"width:100%;height:600px"
class
=
"main"
/>
</
div
>
|
/UI2/demo/misc/echarts/demo.js内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
define(
function
(require) {
var
$ = require(
"jquery"
);
var
justep = require(
"$UI/system/lib/justep"
);
require(
"./dist/echarts-all"
);
var
Model =
function
() {
this
.callParent();
};
Model.prototype.modelLoad =
function
(event) {
var
option = {
tooltip : {
trigger:
'axis'
},
legend: {
data:[
'蒸发量'
,
'降水量'
]
},
toolbox: {
show :
true
,
feature : {
mark : {show:
true
},
dataView : {show:
true
, readOnly:
false
},
magicType : {show:
true
, type: [
'line'
,
'bar'
]},
restore : {show:
true
},
saveAsImage : {show:
true
}
}
},
calculable :
true
,
xAxis : [
{
type :
'category'
,
data : [
'1月'
,
'2月'
,
'3月'
,
'4月'
,
'5月'
,
'6月'
,
'7月'
,
'8月'
,
'9月'
,
'10月'
,
'11月'
,
'12月'
]
}
],
yAxis : [
{
type :
'value'
,
splitArea : {show :
true
}
}
],
series : [
{
name:
'蒸发量'
,
type:
'bar'
,
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:
'降水量'
,
type:
'bar'
,
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
};
var
myChart = echarts.init(
this
.getElementByXid(
'main'
));
myChart.setOption(option);
};
return
Model;
});
|
说明：
1. 在demo.js文件中，通过require(“./dist/echarts-all”)加载了Echarts, 之后就可以使用echarts全局变量;
2. 在model的onLoad事件中, 通过全局变量echarts初始化一个myChart对象, 并为为myChart设置参数。
第四步 好，大功告成，来看看运行效果
启动WeX5上的小猫(Tomcat)，在chrome浏览器输入http://localhost:8080/x5/UI2/demo/misc/echarts/demo.w看看运行效果吧….