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