愛招飛幫助手冊 愛招飛幫助手冊
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • Report

  • Script

  • EChart

    • ECharts使用說明

      • ECharts特性
      • ECharts安裝
      • ECharts配置語法
      • 在FastWeb中引入ECharts
        • 1. 元件引入
        • 2. HTML引入
      • ECharts基礎概念概覽
      • 個性化圖表的樣式
      • ECharts中的樣式簡介
      • 非同步數據載入和更新
      • 使用dataset管理數據
      • 使用transform進行數據轉換
      • 在圖表中加入互動元件
      • 移動端自適應
      • 數據的視覺對映
      • ECharts中的事件和性為
      • 動態排序柱狀圖
      • 小例子自己實現拖拽
      • 小例子實現日曆圖
      • 旭日圖
      • 自定義系列
      • 富文字標籤
    • ECharts屬性說明

  • Chart

  • DB Install

  • HiDesk

  • HiNAT

  • ReportBuilder

目录

在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]
    }]
};
1
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>
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

  與TUgEChart比起來,這種方式可以自行引入js指令碼,靈活性更高,能夠更大程度發揮自定義的效果。

ECharts配置語法
ECharts基礎概念概覽

← ECharts配置語法 ECharts基礎概念概覽→

Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式