使用Delphi開發echarts圖表

用DeWeb可以實現用Delphi開發echarts圖表

DeWeb : Delphi開發者的Web解決方案！

DeWeb是一個可以直接將Delphi程序快速轉換為網頁應用的工具！使用DeWeb, 開發者不需要學習HTML、JavaScript、Java、PHP、ASP、C#等新知識，用Delphi搞定一切。 DeWeb開發的網頁支持所有客戶端，包括手機、平板等。

網址：https://gitee.com/xamh/dewebsdk

采用DeWeb可以非常方便開發echarts圖表應用。

還不會DeWeb開發的朋友請參考相關文檔

1 打開一個基本DeWeb應用

比如自帶的hello例程

2 創建echarts控件

拖放一個TMemo控件，設置其HelpKeyword為echarts

3 配置echarts控件

（1）在echarts官網打開擬開發的圖表例程，如

https://echarts.apache.org/examples/zh/editor.html?c=pie-nest

效果圖如下：

echarts圖表效果

（2）復制該網頁左側的JS代碼，注意：只復制option后{....}及其中的內容

（3）打開Notepad++, 新建一個文件，粘貼進去, 再全選，然后復制；

這一步驟主要是保持原代碼的換行符。直接復制到TMemo控件中會丟失，導致錯誤。

（4）打開Delphi中TMemo控件的Lines, 粘貼進去

即內容為

{
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} (nvzlxdl%)'
  },
  legend: {
    data: [
      'Direct',
      'Marketing',
      'Search Engine',
      'Email',
      'Union Ads',
      'Video Ads',
      'Baidu',
      'Google',
      'Bing',
      'Others'
    ]
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1548, name: 'Search Engine' },
        { value: 775, name: 'Direct' },
        { value: 679, name: 'Marketing', selected: true }
      ]
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|djfhbzp%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [
        { value: 1048, name: 'Baidu' },
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 251, name: 'Google' },
        { value: 234, name: 'Union Ads' },
        { value: 147, name: 'Bing' },
        { value: 135, name: 'Video Ads' },
        { value: 102, name: 'Others' }
      ]
    }
  ]
}

在窗體的OnMouseDown事件中寫入

dwEcharts(Memo1);

編譯運行，即可得到

（5）更新數據。

執行到上一步，效果出來了，但會發現無法更新數據。

原因是代碼中把數據（data部分）寫成固定的了

先需要把TMemo的內容改成以下。注意"data:XXX"的變化

{
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} (nvzlnnb%)'
  },
  legend: {
    data: [
      'Direct',
      'Marketing',
      'Search Engine',
      'Email',
      'Union Ads',
      'Video Ads',
      'Baidu',
      'Google',
      'Bing',
      'Others'
    ]
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: this.value0
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|hbzjnvt%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: this.value1
    }
  ]
}

對應

this.value0應為
[
    { value: 1548, name: 'Search Engine' },
    { value: 775, name: 'Direct' },
    { value: 679, name: 'Marketing', selected: true }
]

this.value1應為
[
    { value: 1048, name: 'Baidu' },
    { value: 335, name: 'Direct' },
    { value: 310, name: 'Email' },
    { value: 251, name: 'Google' },
    { value: 234, name: 'Union Ads' },
    { value: 147, name: 'Bing' },
    { value: 135, name: 'Video Ads' },
    { value: 102, name: 'Others' }
]

在Delphi中的事件中組類似的字符串就可以了

具體做法是增加一個Timer, 時間設置為3000，代碼如下：

procedure TForm1.Timer1Timer(Sender: TObject);
var
    sV0,sV1     : String;
    sJS         : String;
begin
    //value0
    //[
    //    { value: 1548, name: 'Search Engine' },
    //    { value: 775, name: 'Direct' },
    //    { value: 679, name: 'Marketing', selected: true }
    //]

    //value1
    //[
    //    { value: 1048, name: 'Baidu' },
    //    { value: 335, name: 'Direct' },
    //    { value: 310, name: 'Email' },
    //    { value: 251, name: 'Google' },
    //    { value: 234, name: 'Union Ads' },
    //    { value: 147, name: 'Bing' },
    //    { value: 135, name: 'Video Ads' },
    //    { value: 102, name: 'Others' }
    //]
    //

    //
    Randomize;

    //Get value0 string
    sV0 := 'this.value0=['
        +'{ value: %d, name: ''Search Engine'' },'
        +'{ value: %d, name: ''Direct'' },'
        +'{ value: %d, name: ''Marketing'', selected: true }'
    +'];';
    sV0 := Format(sV0,[Random(1500),Random(1000),Random(1000)]);

    //Get value1 string
    sV1 := 'this.value1=['
        +'{ value: %d, name: ''Baidu'' },'
        +'{ value: %d, name: ''Direct'' },'
        +'{ value: %d, name: ''Email'' },'
        +'{ value: %d, name: ''Google'' },'
        +'{ value: %d, name: ''Union Ads'' },'
        +'{ value: %d, name: ''Bing'' },'
        +'{ value: %d, name: ''Video Ads'' },'
        +'{ value: %d, name: ''Others'' }'
    +'];';
    sV1 := Format(sV1,[Random(1500),Random(1000),Random(1000),Random(1000),Random(1000),Random(1000),Random(1000),Random(1000)]);

    //
    dwRunJS(sV0+sV1,self);

    dwEcharts(Memo1);

end;

這樣echarts圖表就可以動態更新了。

關注我，學習更多Delphi知識！

Photo/Pexels]

“舉步維艱”，漢語成語，抬腳行走十分困難，比喻行動困難重重，工作很難開展或生活艱難。可以翻譯為“have difficulty taking a step forward，have difficulty in carrying out a cause/plan或be struggling”等。

例句：

這家公司剛剛成立，舉步維艱。

They have a hard time running the newly-established company.

去年，這家公司超越了舉步維艱的美國德爾福公司，成為世界上最大的汽車零部件供應商。

This company is the world's largest car-parts supplier, having overtaken the struggling Delphi of the US last year.

Editor: Jade

來源：中國日報網

.Delphi項目文件結構

Delphi應用程序是以項目的形式來組織的，每個項目包含了編譯后的目標應用程序所需要的全部文件。

在Delphi中，創建應用程序時會自動創建一個項目文件；也就是說一個應用程序就是一個項目，由一個或多個文件以及項目文件組成。組成項目的文件包括：

1.1項目文件 dpr

項目文件以“.dpr”為擴展名。項目文件本身是含有Object Pascal語句的源代碼文件。當應用程序啟動時，首先會執行項目文件中的代碼。如：創建一個項目后選擇 Project | View Source 命令，即可看到項目文件的源代碼。

program Project1;

uses
  Vcl.Forms,
  Unit1 in 'Unit1.pas' {Form1};

{$R *.res}

begin
  Application.Initialize;
  Application.MainFormOnTaskbar := True;
  Application.CreateForm(TForm1, Form1);
  Application.Run;
end.

在上面的代碼中：

program

說明當前文件是項目文件，同時說明項目編譯后的可執行文件名稱。

uses

項目引用的文件，逗號分隔，被引用的文件可以是系統創建的單元文件，也可以是用戶創建的單元文件。

編譯器指令，指明鏈接的資源文件。{$R *.res}指令指示Delphi在擴展名為res的文件查找windows資源信息。

begin ... end

定義了程序的開始和結束。

通過情況下，Delphi 是自動維護項目文件的，不需要對其進行編輯。但我們可以通過在項目文件中添加代碼來實現一些特定的操作，比如：打開啟動畫面，初始化數據庫連接等。

1.2單元文件 pas

Delphi 應用程序的源代碼一般都是保存在單元文件中的，單元文件的擴展名為“.pas”，每個項目至少有一個單元文件。單元文件的類型：

窗體和數據模塊組件對應的單元文件

這些文件是Delphi在創建窗體等組件時自動創建的，一般每個窗體會對應一個單元文件，用來保存窗體的事件處理程序。

創建組件的單元文件

一般用來保存窗體的事件處理程序

通用的單元文件

程序員自行創建的單元文件，一般用來聲明應用程序中需要的數據類型、常量定義、全局變量和存儲用戶自定義函數、過程等。

1.3窗體文件 dfm

當我們在項目中創建一個窗體的時候，Delphi 會自動創建一個窗體文件和一個單元文件。

窗體文件中包含窗體定義的外觀、尺寸、位置等屬性信息。

可以通過在窗體上右擊，選擇 View as Text 來查看窗體文件的內容，如：

object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 231
  ClientWidth = 505
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
end

1.4中間編譯單元 dcu

編譯過的單元是不可執行的，以“.dcu”為擴展名。在建立應用程序的鏈接階段，所有dcu文件鏈接成為可執行程序。如果希望其他的開發者使用這種產品來建立應用程序，可以只發布dcu文件而不發布源代碼。以這樣的方式發布產品，其他開發者可以使用該代碼，而無須知道代碼是如何編寫的。

1.5備份文件 ~pas

當我們對文件進行了改動并保存，Delphi會自動保存一個備份文件，其擴展名為“.~pas”。恢復文件只需要將文件擴展名中的~去掉即可。如果不希望系統默認的備份，可以取消備份，通過 Tools / Editor Options，打開 Editor Propertirs 對話框，選擇 Dsiplay，取消對 Create backup file 的選擇即可。

1.6資源文件 res

資源文件是用于保存應用程序的圖標、應用程序信息以及其他資源信息的文件，擴展名為“.res”。資源文件是二進制文件，在編譯時，編譯器會自動將這些資源鏈接到應用程序中。

1.7應用程序文件 dll exe ocx

Delphi能夠創建的應用程序包括：動態鏈接庫dll、可執行文件exe和ActiveX組件ocx。

1.8配置與選項文件 dof

當改動 Project Options 設置時，Delphi會把改動保存在一個擴展名為“.dof”的文件中，當所做的改動影響到應用程序的編譯方式時，這些改動將以文本形式存儲到.cfg文件中。

在大部分情況下，我們不需要參與這些文件的管理，Delphi會自動對這些文件進行管理。

在線咨詢

上一篇：手把手教你使用CSS3動畫特性實現loading效果，趕緊來學習一下吧
下一篇：css怎么引入html

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商