django+echarts

思路：

统一返回数据类型为json，然后前端发起Ajax请求后台数据接口

views.py

def count_blog(request):# 下面等价于：select distinct auth,count() as blog_count from cms_blogpost group by auth# auth_count_blog=BlogPost.objects.values('auth').distinct().annotate(blog_count=Count('auth')).all()# print '第1个作者的数量为：', auth_count_blog# auth_count_blog=[{'blog_count': 1, 'auth': u'guchen'}, {'blog_count': 1, 'auth': u'\u6c6a\u5a07'},# {'blog_count': 7, 'auth': u'\u8c37\u6668'}]auth_count_blog={'blog_count': [10, 15, 20],'auth': ["guchen", "wangjiao", "zhuzhu"]}#  向js中传递数据必须json.dumps()处理return render(request, 'count_blog.html', {'auth_count_blog': json.dumps(auth_count_blog)})

count_blog.html

    <!--echarts图表--><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 显示标题，图例和空的坐标轴
myChart.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]
});var auth_count_blog={}; //请求前先不要获取后端返回的数据，先定义空的字典$.get('/count_blog/').done(function (auth_count_blog) {<!--$.ajax({--> //用这种请求没有出来图auth_count_blog = {{auth_count_blog|safe}}; // 获取后台传来的数据需要加上safe过滤<!--url: '/count_blog/',--><!--type: 'POST',--><!--data: {},--><!--dataType: 'json',--><!--success:function(auth_count_blog){-->myChart.setOption({xAxis: {data: auth_count_blog['auth'] //获取字典的作者},yAxis: {},series: [{name: '销量',type: 'bar',data: auth_count_blog.blog_count //获取对应的作者的博客数}]});<!--}-->});</script>{% endblock %}
</body>
</html>

转载于:https://www.cnblogs.com/gcgc/p/9584303.html

django+echarts相关推荐

Django+Echarts画图实例
所有演示均基于Django2.0 阅读此篇文章你可以: 了解Django中aggregate和annotate函数的使用方法获取一个Django+Echarts绘制柱状图的完整示例需求说明一张会 ...
django+echarts+ajax异步+显示优化--基本例子
django+echarts+ajax异步+显示优化--基本例子 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 2 ...
《数据分析-Echarts》Python + Django + echarts图表展示
Python + Django + echarts图表展示项目打包文件一.准备工作 ## 1.python环境安装 ## 2.python开发工具PyCharm安装二.创建Django项目三. ...
Django echarts初试随笔
Django项目的配置文件APP配置 INSTALLED_APPS = ['django.contrib.admin', # 管理员站点'django.contrib.auth', # 认证授权系统' ...
利用爬虫和Django+echarts建立自己的动画人气统计小站
开发环境:Django版本1.11.4,python版本3.6.0 Django后台的准备新建项目如何安装django就不多说了,安装好之后打开cmd,输入django-admin.py star ...
django Echarts画柱状推移图
1. 首先确定要画什么样的图,在Echarts官网找好案例 2.根据图确认需要准备的数据,从后台准备数据传递给模板 3.模板渲染,使用Echarts组件功能完成自己想要的内容中间遇到几个坑: 1. ...
django报表系统_django使用echarts
项目采用vue+echarts+datav开发的大屏数据展示及实现中国地图省市县下钻,数据图形可视化,数据间的相互联动. ... » 学习目录 1.可视化面板介绍 1.1技术要点 1.2案例适配方案 ...
Django集成Markdown编辑器【附源码】
专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低目前各大Blog平台都已支持m ...
Django+JWT实现Token认证
对外提供API不用django rest framework(DRF)就是旁门左道吗? 基于Token的鉴权机制越来越多的用在了项目中,尤其是对于纯后端只对外提供API没有web页面的项目,例如我们通 ...

django+echarts

django+echarts相关推荐

最新文章

热门文章