昨天为朋友做了一个简单的ECharts柱图(bar)显示,其他的朋友也在问如何改造其他类型图表,今天顺便写一个教程吧。
1、在ECharts网站找到需要的图表类型
比如:想显示饼图(pie)
复制当前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!