Project Description

WeX5集成Echarts

勇士vs黄蜂全场 www.dgnih.club 我們做網站或者應用的時候,很多需要數據統計報表,現在給大家介紹一款百度的報表控件,效果不錯,兼容ie8+以上等主流瀏覽器。

什么是ECharts?

EChartsEnterprise 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后的結果,復制后的目錄結構如下:echart-dir

 

其中/UI2/demo/misc/echarts/dist是Echarts壓縮后的結果, 用來發布使用,/UI2/demo/misc/echarts/source是Echarts源碼,用來開發調試使用。

第三步:創建w文件,并在相應的js文件中引用Echarts

/UI2/demo/misc/echarts/demo.w文件內容如下:

/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瀏覽器輸入//localhost:8080/x5/UI2/demo/misc/echarts/demo.w看看運行效果吧….

附件:Echarts案例