使用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

效果图如下：

（2）复制该网页左侧的JS代码，注意：只复制option后{....}及其中的内容

（3）打开Notepad++, 新建一个文件，粘贴进去, 再全选，然后复制；

这一步骤主要是保持原代码的换行符。直接复制到TMemo控件中会丢失，导致错误。

（4）打开Delphi中TMemo控件的Lines, 粘贴进去

即内容为

{
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  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|{d}%}  ',
        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} ({d}%)'
  },
  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|{d}%}  ',
        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知识！