四时宝库

程序员的知识宝库

如何采用DeWeb开发ECharts图表应用?

昨天为朋友做了一个简单的ECharts柱图(bar)显示,其他的朋友也在问如何改造其他类型图表,今天顺便写一个教程吧。

1、在ECharts网站找到需要的图表类型

Examples - Apache ECharts

比如:想显示饼图(pie)

网址:Examples - Apache ECharts


复制当前ECharts图表“代码配置”的如下图所示部分代码,备用



2、 新建一个DeWeb应用,具体步骤请参见DeWeb开发文档。建议复制并重命名一个已有的DeWeb案例,比如Hello,删除其所有的控件及事件代码

3、 在其窗体上旋转一个TMemo控件,设置其helpkeyword为echarts。然后将步骤1中复制的代码赋给该TMemo控件的Lines


4、在窗体的OnMouseDown事件中写一行代码(注:OnMouseDown事件会在网页启动完成后执行)

dwEcharts(Memo1);

5、 编译运行,结果如下图


至此,已可以显示ECharts图表了。

6、如何动态更改数值?上述生成的图表不能在运行时动态更新。如果需要动态更新,则需要在

在本案例中,ECharts的数据配置在以下部分


所以需要把这部分设置为可动态的。把选中的部分代码改成:this.value0

如图


将上图选中部分的代码(注意:data后已修改为this.value0)赋给该TMemo控件的Lines

再编译DeWeb工程时,界面如下


为什么会空白呢?是因为需要指定的data对应的变量this.value0未指定值

7、给变量this.value0动态赋值

变量也可能还有this.value1,this.value2,...,命名可以随意,比如:this.valuex,this.valuey,符合规范即可

给变量this.value0动态赋值给简单,也就是组一个和原来ECharts中的值类似的字符串即可

原来的data的值为:

[
		{ value: 1048, name: 'Search Engine' },
		{ value: 735, name: 'Direct' },
		{ value: 580, name: 'Email' },
		{ value: 484, name: 'Union Ads' },
		{ value: 300, name: 'Video Ads' }
]

可以采用以下代码来进行赋值

procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X,
  Y: Integer);
var
    sJS     : string;
begin
    //给变量this.value0动态赋值
    sJS := 'this.value0=['
	    +'{ value: %d, name: ''MicroSoft'' },'
        +'{ value: %d, name: ''Maxxua'' },'
        +'{ value: %d, name: ''Summung'' },'
        +'{ value: %d, name: ''Huawei'' },'
        +'{ value: %d, name: ''XiaoMi'' } '
        +'];';
    sJS := Format(sJS,[Random(1000),Random(1000),Random(1000),Random(1000),Random(1000)]);
    //
    dwRunJS(sJS,self);
    //
    dwEcharts(Memo1);

end;

此时编译运行,即可以看到动态的效果


网站每刷新一次,即可以更新一次数据。

如果不想刷新,也可以增加一个按钮来执行上面的代码即可


更多的动态请关注我:碧树西风!

欢迎关注支持DeWeb!

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接