delphiforphp教程技巧_运用Delphi开拓echarts图表

文章目录 [+]

DeWeb : Delphi开拓者的Web办理方案！

DeWeb是一个可以直接将Delphi程序快速转换为网页运用的工具！
利用DeWeb, 开拓者不须要学习HTML、JavaScript、Java、PHP、ASP、C#等新知识，用Delphi搞定统统。
DeWeb开拓的网页支持所有客户端，包括手机、平板等。

delphiforphp教程技巧_运用Delphi开拓echarts图表

网址：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} ({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知识！