在FastWeb中引入ECharts
# 在FastWeb中引入ECharts
ECharts配置語法中的使用方式是ECharts官方的使用方式，在FastWeb中請按照以下方式使用。
# 1. 元件引入
FastWeb設計器中帶有一個ECharts元件TUgEChart，只要在其中設定Option屬性，就可以顯示相應的圖表。
使用開發模式打開FastWeb頁面，點選功能表導航欄中的[系統工具]右側的小箭頭展開其中的功能表欄。
單擊展開功能表欄中的[模組列表(WEB)]專案，打開模組列表(WEB)選項卡。該選項卡中列出了系統中包含的WEB模組列表。可在該界面下對模組進行管理。
點選模組左上角的[新增]按鈕，打開新增模組的界面，在該界面下填寫組別、標題、開發使用者等資訊。其中選擇開發使用者為admin。填寫完成後點選[儲存]以完成新增模組的操作。
模組儲存完成後，新增的模組會被自動選中，此時可點選上方的[模組設計]按鈕進入到模組設計界面。
拖放控制元件的操作如下：點選額外的選項卡中的第一個圖示(TUgEChart)，即選擇該元件進行放置，然後點選控制元件設計區域，將控制元件放置於該點選區域的位置中。
放置完成後顯示效果圖如下。
在左側的屬性列表中找到Options屬性，雙擊以打開編輯器。
編輯器中輸入的內容格式是以option為開頭的部分，以下以上面的網頁中的此部分為一個示例。將下面的內容輸入至Options屬性中，運行即可看到ECharts運行的結果。
option = {
//標題：為圖表配置標題
title: {
text: '第一個 ECharts 實體'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
目前的TUgEChart不支援js指令碼引入，僅支援通過修改option配置來變化，適用於簡單圖表的搭建。
# 2. HTML引入
當然，也可以直接使用TUgURLFrame，在其HTML屬性中輸入網頁實體部分的內容。
在上述的示例完成後，我們選擇附加的頁簽，單擊其中的TUgURLFrame，然後在設計區頁面單擊，將控制元件放置在頁面上。
在屬性列表中找到此控制元件的HTML屬性，雙擊以打開編輯框頁面，輸入HTML頁面的內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
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
與TUgEChart比起來，這種方式可以自行引入js指令碼，靈活性更高，能夠更大程度發揮自定義的效果。