使用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}
{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}
{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知识！