django获取div id_可视化 ——Django与echarts

更多精彩，请点击上方蓝字关注我们！

获取数据库数据

def get_bar_data():    """    从mysel数据库中获取绘制柱形图所需的数据    因为绘制饼图需要的数据一样，封装的格式不同而已，所以一起获取也ok    :return:        gx_city：广西省市名称  list        bar_confirmed_count_gx：广西累计确诊   list        pie_data：{'value':广西累计确诊, 'name':广西省市名称}    list套字典    """    sql = """select sum(confirmed_count), city_name from covid_data_2017 where province_code=450000 and     update_time='2020-02-29' group by city_code """    # 获取数据库的连接    mydb = db()    # 获取查询到的游标    cur = mydb.get_cur(sql)    # 获取所有数据    data = cur.fetchall()    bar_confirmed_count_gx = []    gx_city = []    pie_data = []    for c, city in data:        bar_confirmed_count_gx.append(int(c))        gx_city.append(city)        pie_data.append({'value':int(c), 'name':city})    return gx_city, bar_confirmed_count_gx, pie_data

视图函数

def index(request):    if request.method == "POST":        pass    else:        gx_city, bar_confirmed_count_gx, pie_data = get_bar_data()        return render(request, 'index.html', locals())

这里index视图只处理get请求，render的locals()方法返回视图中的所有变量。

前端js脚本

html使用jinja2直接获取Django响应的数据直接使用两个大括号

{{ gx_city|safe }}

{{ bar_confirmed_count_gx|safe }}

---

具体的美化样式代码详情就请自行echarts官网了

在Django项目配置static路径

# Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/2.2/howto/static-files/STATIC_URL = '/static/'STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

在项目下的settings.py文件添加STATICFILES_DIRS全局变量，就可以在html中使用jinja2导入静态文件了。

html导入Django项目中的静态文件

{% load static %}<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" media="all"/><script src="{% static 'js/echarts.min.js' %}" charset="utf-8">script><script src="{% static 'js/jquery-3.2.0.min.js' %}" charset="utf-8">script><script src="{% static 'js/china.js' %}">script><script src="{% static 'js/map/china-contour.js' %}">script><script src="{% static 'js/map/china.js' %}">script>

首先需要在页面中load加载static，然后就可以在页面中使用{% static ‘filepath’%}获取static文件夹下的文件。

html标签占位

class="mrbox_top_right">

class="arightboxtop">

class="tith2">广西各地市的累计确诊人数

"aleftboxtbott" class="aleftboxtbott_contr">

    

这里就一个带id的div标签占位就ok，具体的css样式可以写入另外的.css文件

检查前端是否成功获取数据

ok，两个data部分都可以成功获取到数据

效果

---

这里还设置了tooltip，用于获取鼠标在表中具体的x轴和y轴的参数，截图截不出效果，可以自己尝试。

公众号ID和密码一样

欢迎登录公众号发表、分享你的成长收获

▼往期精彩回顾▼可视化——中国地图可视化——日历热力图可视化——雷达图可视化——箱形图

扫码关注

有趣的灵魂在等你

我就知道你“在看”