django Echarts画柱状推移图

1. 首先确定要画什么样的图，在Echarts官网找好案例

2.根据图确认需要准备的数据，从后台准备数据传递给模板

3.模板渲染，使用Echarts组件功能完成自己想要的内容

中间遇到几个坑：

1. by月份统计客户来访次数，数据库中存入的是Date格式，如何转换月份？ XXX.strftime("%Y") 这样就可以以单独获取年月日

2.如何从数据库中By月份拿数据？参考下面这一句，先mapping年，再来是月，再来是你想要做的事

models.VisitCusInfo.objects.filter(auditDate__year=row[0:4],auditDate__month=row[5:7],visitCompany__companyName=com).values("visitCompany__companyName").count()

3.后台写好数据传入前台js时报错，是因为模板渲染了，需要加入 {{ |safe }}

OK,先看结果:

后台代码，里面有很详细的注释：

from django.shortcuts import render,HttpResponse
from app1 import models
from datetime import datetime,date,timedeltadef columnsChart(request):#统计所有来访公司来访次数的by month推移图(柱状堆叠图)#要画图第一步，获取行名和列名#列名: 获取visitCus中 所有来访公司的名字#行名: 获取所有数据库中的月份#数据：获取所有来访公司在数据库表中的count#首先获取列名：所有公司名称companys = models.VisitCusInfo.objects.values("visitCompany__companyName").distinct()cols=[]for company in companys:if company["visitCompany__companyName"] not in cols:cols.append(company["visitCompany__companyName"])print(cols)#再来获取行名及数据dates = models.VisitCusInfo.objects.values("auditDate") #by客户稽核时间#对获取到的时间格式整理成by month,只获取月份rows = []for row in dates:month = row['auditDate'].strftime("%Y-%m")if month not in rows:rows.append(month)rows.sort()print(rows)#by月份 by公司获取每个公司访问次数#Echarts官网source参考： 获取legend# legend: {#     data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']# },legend_data=cols#获取x轴数据，Echarts官网示例# xAxis : [#     {#         type : 'category',#         data : ['周一','周二','周三','周四','周五','周六','周日']#     }x_data = rows#获取数据内容，Echarts官网示例：# series : [#     {#         name:'直接访问',#         type:'bar',#         stack: '广告',#         data:[320, 332, 301, 334, 390, 330, 320]#     },#     {#         name:'邮件营销',#         type:'bar',#         stack: '广告',#         data:[120, 132, 101, 134, 90, 230, 210]#     },series=[]#rows存的是日期，cols存的是公司名for com in cols:serie = {"name":com,"type":"bar","stack":"访问次数","data":None}series_data = []for row in rows:cnt = models.VisitCusInfo.objects.filter(auditDate__year=row[0:4],auditDate__month=row[5:7],visitCompany__companyName=com).values("visitCompany__companyName").count()series_data.append(cnt)serie["data"]=series_dataseries.append(serie)#柱子宽度可以在这里设置,注意必须加在最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。series[-1]['barWidth']="40%"print(series)return render(request,"charts/visitChart.html",{"series":series,"x_data":x_data,"legend_data":legend_data})

再上前台代码：

{#<!DOCTYPE html>#}
<html lang="en">
<head><meta charset="UTF-8"><title>visitCharts</title><script src="/static/js/echarts.js"></script><style>#chart1{width: 1000px;height: 400px;}</style>
</head>
<body><div id="chart1"></div>
</body>
<script>// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('chart1'));//app.title = '堆叠柱状图';option = {tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},legend: {//data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']data:{{ legend_data|safe }}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type : 'category',data:{{ x_data|safe }}//data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value',max: 5}],series:{{ series|safe }},dataZoom: [{   // 这个dataZoom组件，默认控制x轴。type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件start: 20,      // 左边在 10% 的位置。end: 100         // 右边在 60% 的位置。},{   // 这个dataZoom组件，默认控制x轴。type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件start: 20,      // 左边在 10% 的位置。end: 100         // 右边在 60% 的位置。}],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</html>

django Echarts画柱状推移图相关推荐

matplotlib画柱状对比图
背景有两组数据,用柱状图表示出两组数据之间的差异代码 import numpy as np from matplotlib import pyplot as plt ''' 柱形对比图共有11组 ...
Matlab画柱状、饼状填充图（亲测可用）
Matlab画柱状.饼状填充图 1. 把下列代码保存为名为"applyhatch.m"的文件 function applyhatch(h,patterns,colorlis ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...
echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
label mpchart 饼图_Origin系列：绘制柱状堆积图
原创不易,感谢分享,欢迎转发,请点在看堆积柱状图十分美观,不仅能够展示数据占比,更能表现其变化趋势,是科研必备技能今天分享粉丝提出类似下列图形用Origin绘制多列柱状堆积图.希望对大家有所帮助 ...
exlc如何对比_excel表格图形数据比较-Excel如何做柱状对比图
excel表格怎么做数据对比图 Excel的图表功能已供了柱状对,下面以Excel 2010为例进行实例演示--用柱状图对比显示下面数据列一和系列二 1.选中数据→插入→柱形图→簇状柱形图 2.因为数 ...
python画柱状图-Python画柱状统计图操作示例【基于matplotlib库】
本文实例讲述了Python画柱状统计图操作.分享给大家供大家参考,具体如下: 一.工具:python的matplotlib.pyplot 库二.案例: import matplotlib.pyplo ...
如何展现两极化数据，Excel柱状断层图不二之选
点赞再看,养成习惯:至长反短,至短反长. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含Ex ...

django Echarts画柱状推移图

django Echarts画柱状推移图相关推荐

最新文章

热门文章