# 土洋结合，vfp土得掉渣，混合echarts生成图表咋这么潮
简单介绍一下： Apache ECharts， 一个基于 JavaScript 的开源可视化图表库
首先打开Echarts的的官网，查看一下示例，可以看到有很多精美的示列，能不能为我们所用呢?
我们来看一下最简单的柱状图的生成代码。
点击基础柱状图就可以打开一个新的页面
代码也是极少的
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
看起来其实就个数据结构，也就是JSON，那我们随便把X轴，Y轴改成我们自己的数据：
改完右边的示意图就变了，简单不要太方便了。
那再来看下我们的基础数据表
数据就是分组求和
Select 分类,Sum(m01) m01 From da1 Group By 分类 Into Cursor tmpda1
1
X轴就是分类，Y轴就是M01
好了，后端的代码就可以写了
Define Class ctl_chart2 As Session
Procedure GetData
Use Database\da1 Alias da1 Shared In 0
Select 分类,Sum(m01) m01 From da1 Group By 分类 Into Cursor tmpda1
Select tmpda1
xAxisdata=Createobject("foxjson",{})
seriesdata=Createobject("foxjson",{})
Scan
xAxisdata.Append(分类)
seriesdata.Append(m01)
Endscan
xAxis=Createobject("foxjson")
xAxis.Append("type","category")
xAxis.Append("data",xAxisdata)
yAxis=Createobject("foxjson")
yAxis.Append("type","value")
series=Createobject("foxjson")
series.Append("type","bar")
series.Append("data",seriesdata)
oJson=Createobject("foxjson")
oJson.Append("xAxis",xAxis)
oJson.Append("yAxis",yAxis)
oJson.Append("series",series)
Return oJson.toString()
Endproc
Enddefine
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
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
代码就是一层一层拼成图表的数据结构就OK了.
前端页面也简单，引入JQUERY，Echarts的库文件
<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/echarts.min.js"></script>
1
2
2
完整前端页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/echarts.min.js"></script>
</head>
<body>
<div>
<div >
<h5>柱图示例</h5>
<div class="chart" id="barChart" style="height: 600px;width: 100%;" ></div>
</div>
</div>
<script>
$(function(){
var url ="http://192.168.0.99:801/ctl_chart2.fsp?proc=GetData";
$.getJSON(url,function(mydata){ //获取图表数据
var barChart = echarts.init(document.getElementById('barChart'));
barChart.setOption(mydata);
})
})
</script>
</body>
</html>
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
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
运行查看一下效果：
有人问，那在VFP的表单中可以实现这种绚丽的图表吗？ 回答是：当然没有问题。
不要被语言束缚了你的手脚，无论什么语言都只是你趁手的一件工具。