ECharts图表
# Smart之EChart图表
# 1. 说明
范例通过ECharts，来实现图表数据信息的展示。ECharts是一个使用 JavaScript 实现的开源可视化库，可提供直观，交互丰富，可高度个性化定制的数据可视化图表。详情可点击Echarts网站 (opens new window)进行了解。
通过范例学习，可以学习在Smart中引入ECharts进行图表展示。
# 2. 设计明细
开启Smart智慧控制平台，分别加入下插图之控件。或者通过点击菜单栏[文件]-[打开项目]选择项目打开该范例。
①：TWebBrowser组件，控件名称为WebBrowser1。
②：TMemo组件，控件名称为Memo1。
③：TPanel组件，控件名称为Panel1。
④：TSwitchButton组件，控件名称为SwitchButton1。
⑤：TImage组件，控件名称为Image1。
Main窗体属性设置
Caption：设置窗体标题=EChart图表。ClientHeight：设置窗体客户区高度=670。ClientWidth：设置窗体客户区宽度=1168。
①WebBrowser1属性设置
Align：设置控件对齐=True。
②Memo1属性设置
Height：设置控件高度=645。Width：设置控件宽度=761。Visible：设置控件是否可见=False。Lines：设置文本内容。点击右侧的[...]或者双击该属性打开编辑器，输入如下内容。
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
series: [
{
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直达', selected:true},
{value:679, name:'营销广告'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius: ['40%', '55%'],
label: {
normal: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
data:[
{value:335, name:'直达'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1048, name:'百度'},
{value:251, name:'谷歌'},
{value:147, name:'必应'},
{value:102, name:'其他'}
]
}
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
③Panel1属性设置
Caption：设置面板显示的内容，此处需清空默认内容。Height：设置控件高度=222。Width：设置控件宽度=185。Color：设置颜色显示的颜色=clWindow。
④SwitchButton1属性设置
Height：设置控件高度=50。Width：设置控件宽度=50。
⑤Image1属性设置
Height：设置控件高度=50。Width：设置控件宽度=50。Stretch：设置图片拉伸=True。Picture：设置图片。点击Picture属性右侧的[...]按钮，打开文件上传界面，点击[Load...]从文件浏览器中选择对应的图片文件上传，返回该界面下，待显示出图片后点击[OK]加载图片。
# 3. 程序设计
# 3.1. 程序初始设置
该程序无初始设置。
# 3.2. 事件设置
- ④SwitchButton1-OnSwitch事件
当开启或者关闭该按钮时，对应的用于构造图表的设置内容文本框会显示或者关闭。
procedure TMyHandler.SwitchButton1Switch;
// 开启、关闭配置信息
begin
FThis.Memo1.Visible := FThis.SwitchButton1.IsChecked;
end;
1
2
3
4
5
2
3
4
5
- ⑤Image1-OnClick事件
当点击该按钮时，显示图表。
procedure TMyHandler.Image1Click;
var
Str:TStringlist;
strSPMC,strSL,PathStr:string;
Begin
Str := TStringlist.Create;
strSPMC := '1,';
strSL := '6,';
try
//str.add('< html> ');
str.add('<html> ');
str.add('<head> ');
str.add(' <meta http-equiv="content-type" content="text/html";charset="utf-8"> ');
//str.add(' <title>ECharts</title> ');
// str.add(' <-- 引入 echarts.js --> ');
str.add(' <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script> ');
str.add('</head> ');
str.add('<body> ');
//str.add(' <-- 为ECharts准备一个具备大小（宽高）的Dom --> ');
str.add(' <div id="main" style="width: 1100px;height:600px;"></div> ');
str.add(' <script type="text/javascript"> ');
//str.add(' // 基于准备好的dom，初始化echarts实例 ');
str.add(' var myChart = echarts.init(document.getElementById(''main'')); ');
str.add(' ');
str.add(' // 指定图表的配置项和数据 ');
str.Add(FThis.Memo1.Lines.Text);
//str.add(' var option = { ');
//str.add(' title: { ');
//str.add(' text: ''类别销售对比''');
//str.add(' }, ');
//str.add(' tooltip: {}, ');
//str.add(' legend: { ');
//str.add(' data:[''销量'']');
//str.add(' }, ');
//str.add(' xAxis: { ');
//str.add(' data: [' + strSPMC + '] ');
//str.add(' }, ');
//str.add(' yAxis: {}, ');
//str.add(' series: [{ ');
//str.add(' name: ''品类'', ');
//str.add(' type: ''bar'', ');
//str.add(' data: [' + strSL + '] ');
//str.add(' }] ');
//str.add(' }; ');
str.add(' ');
str.add(' // 使用刚指定的配置项和数据显示图表。 ');
str.add(' myChart.setOption(option); ');
str.add(' </script> ');
str.add('</body> ');
str.add('</html>');
//生成并保存网页
PathStr := '\index.html';
str.SaveToFile(PathStr);
//加载本地网页
FThis.WebBrowser1.Navigate(PathStr);
Finally
//Except {ErrorMsg / RaiseMsg(Const Error:String)}
Str.Free;
End;
End;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
# 4. 运行结果
通过工具栏保存，将程序保存为 sdb 项目文件。
使用鼠标点击工具栏运行（Run），测试运行结果。点击右下角的ECharts图标，初次启动可能需要等待一段时间，部分设备在该阶段的运行过程中可能会弹出安全警报提示，在该界面下点击[是(Y)]按钮，打开图表，点击右下角的开关按钮，可开启或者关闭配置文本框的显示。
