django+ECharts饼状图异步数据请求

views

1
2
3
4
5
6
7
8
9
10
11
12
def test(request):
if request.method == 'GET' and request.GET.get('data') == '1':
data = {'data': [
{'value': 335, 'name': '直接访问'},
{'value': 310, 'name': '邮件营销'},
{'value': 234, 'name': '联盟广告'},
{'value': 135, 'name': '视频广告'},
{'value': 1548, 'name': '搜索引擎'}
],
'categories': ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']}
return JsonResponse(data)
return render(request, 'test.html')

templates

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
{% extends "base.html" %}
{% block headerjs %}
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
{% endblock %}
{% block content %}
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading(); //加载加载动画
myChart.setOption({
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
// 异步加载数据
$.get('/test/?data=1').done(function (data) {
myChart.hideLoading();//隐藏加载动画
// 填入数据
myChart.setOption({
legend: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '访问来源',
data: data.data
}]
});
});
</script>
{% endblock %}

参考

http://echarts.baidu.com/gallery/editor.html?c=doc-example/tutorial-async
http://echarts.baidu.com/demo.html#pie-simple

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器