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')

{% 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 %}