CodeSalt | Django + Echarts 实例
由于近期需要熟悉Django、Echarts，因此通过本文记录实现Django + Echarts 两个小实例的过程，将分别使用不同方式实现Web端Echarts图表的展示：
- 使用
pyecharts展示3D图 - 使用
echarts.js展示折线图 - 后续Django在连接MySQL进行展示时可能遇到的一些问题
0 前期准备
-
环境+Django准备
-
虚拟环境
-
使用指定版本Python(本文使用
python3.5)，创建名为djangovenv的虚拟环境$ virtualenv --python=/Library/Frameworks/Python.framework/Versions/3.5/bin/python3.5 djangovenv
-
激活虚拟环境
$ source ~/venv/djangovenv/bin/activate
-
安装
Django 1.11.4、pyecharts$ pip install django==1.11.4$ pip install pyecharts
-
创建
Django Project、Django App-
创建名为
mychartsite的Project$ django-admin startproject myechartsite
- 进入刚才创建的project目录
$ cd my echartsite -
创建名为
djoncharts的app$ python manage.py startapp djoncharts
-
- 注册app,在
myechartsite/settings.py中注册
INSTALLED_ APPS = [ 'djoncharts', # <----在此添加 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] -
-
1 使用pyecharts
-
安装
$ pip install pyecharts
Demo制作（不与数据库连接，直接来看一个官方样例的效果，3D图）
-
Step1: 在app目录下设置
myechartsite/djoncharts/urls.py和myechartsite/djoncharts/views.py首先，设置
djoncharts/urls，app命名空间有助于让后续模板中{% url %}标签区分应该为URL创建哪个应用的视图# myechartsite/djoncharts/urls.py from django.conf.urls import url from . import views app_name = 'djoncharts' urlpatterns = [ url(r'^pyechart3d/$', views.pyechart3d, name='pyechart3d'), ]之后，处理视图(Views)功能部分，设置
djoncharts/views
将pyecharts的官方案例写入views:# myechartsite/djoncharts/views.py from __future__ import unicode_literals from django.shortcuts import render import math from django.http import HttpResponse from django.template import loader from pyecharts import Line3D from pyecharts.constants import DEFAULT_HOST def pyechart3d(request): template = loader.get_template('djoncharts/pyecharts.html') l3d = line3d() context = dict( myechart=l3d.render_embed(), host=DEFAULT_HOST, script_list=l3d.get_js_dependencies() ) return HttpResponse(template.render(context, request)) def line3d(): _data = [] for t in range(0, 25000): _t = t / 1000 x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t) y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t) z = _t + 2.0 * math.sin(75 * _t) _data.append([x, y, z]) range_color = [ '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] line3d = Line3D("3D line plot demo", width=1200, height=600) line3d.add("", _data, is_visualmap=True, visual_range_color=range_color, visual_range=[0, 30], is_grid3D_rotate=True, grid3D_rotate_speed=180) return line3d - Step2: 为项目提供自己的模板
（上述代码中template = loader.get_template('djoncharts/pyecharts.html')还找不到我们的模板）
首先，在app(/djoncharts)目录下，创建模板/templates以及子目录/templates/djoncharts ，在此子目录下创建pyecharts.html
创建完成后的目录结构为：
├── __init__.py
├── admin.py
├── apps.py
├── tests.py
├── models.py
├── templates/
│ └── djoncharts/
│ └── pyecharts.html
├── views.py
├── migrations/
│ ├── __init__.py
├── urls.py将下面 html 模板代码保存为pyecharts.html，确保 pyecharts.html 文件的绝对路径为 myechartsite/djoncharts/templates/djoncharts:
<!-- myechartsite/djoncharts/templates/djoncharts/pyecharts.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Proudly presented by PycCharts</title>
{% for jsfile_name in script_list %}
<script src="{{host}}/{{jsfile_name}}.js"></script>
{% endfor %}
</head>
<body>
{{myechart|safe}}
</body>
</html>- Step3: 将根目录下的URLconf指向djoncharts.urls模块；按照django文档的指示，我们任何时候都应该使用include()来导入其他URL模式。(admin.site.urls是唯一一个例外)
# myechartsite/urls.py
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
# url(r'^admin/', admin.site.urls),
url(r'^djoncharts/', include('djoncharts.urls')),
]-
Step4: 运行项目
`$ cd myechartsite` `$ python manage.py runserver` 在浏览器输入:`http://127.0.0.1:8000/djoncharts/pyecharts`
2 使用echarts(不使用pyecharts库)
优点在于可个性化灵活定制页面。
- 安装可直接前往官网下载即可
Demo制作（不与数据库连接，直接看一个官方样例的效果，折线图）
在上一个demo里面，我们已经在根目录的URLconf设置了指向djoncharts的urlpatterns, 因此不用管根目录的urls
-
Step1: 在app目录下的
urls.py中添加新的url()，绑定zhexian()视图函数：# myechartsite/djoncharts/urls.py urlpatterns = [ ... url(r'^zhexian/$', views.zhexian, name='zhexian'), ] -
Step2: 在
views.py中添加zhexian()视图函数：# myechartsite/djoncharts/views.py def zhexian(request): return render(request, 'djoncharts/zhexian.html') -
Step3: 导入
echarts.js并添加模板zhexian.html首先，导入
echarts.js：创建目录static/djoncharts/js，复制echarts.js至目录下（确保echarts.js在绝对路径/myechartsite/djoncharts/static/djoncharts/js/echarts.js下）之后，添加模板，将以下代码写入
templates/djoncharts/zhexian.html：{% load static %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 使用 static 关键字--> / <script src="{% static 'djoncharts/js/echarts.js' %}"></script> </head> </html> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width:1280px;height:850px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'Step Line' }, tooltip: { trigger: 'axis' }, legend: { data:['Step Start', 'Step Middle', 'Step End'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name:'Step Start', type:'line', step: 'start', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'Step Middle', type:'line', step: 'middle', data:[220, 282, 201, 234, 290, 430, 410] }, { name:'Step End', type:'line', step: 'end', data:[450, 432, 401, 454, 590, 530, 510] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> -
Step4: 运行项目
$ cd myechartsite$ python manage.py runserver
在浏览器输入:http://127.0.0.1:8000/djoncharts/zhexian
3 后续Django在连接MySQL进行展示时可能遇到的一些问题
-
3.1 如何操作数据库(两种方式)
-
1 执行
cursor()cur = connections['databasename'].cursor() cur.execute(''' SQL语句 ''') # 转换成dataframe df = pd.DataFrame(list(cur.fetchall()), columns=['name','song']) -
2 通过模型，操作模型
-
安装pymysql
-
python3.5不支持MySQL-python所以需要换成pymysql -
安装后在
/myechartsite/myechartsite/__init.py下输入import pymysql pymysql.install_as_MySQLdb()
-
-
准备models
- 若没设置default的数据库，所以需要加
--database=来指定一个。因此使用$ python manage.py inspectdb --database=yourdatabasename查看相应的数据库表的模型 - 可以通过
$ python manage.py inspectdb --database=afant_stat_db > djoncharts/models.py将模型文件写入对应app下的models.py文件
- 若没设置default的数据库，所以需要加
-
-
-
3.2 在视图函数中测试执行SQL语句时候报错
- 解决方法：
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myechartsite.settings")
-
3.3 template中如何取dict值
- 使用循环来取
{% for key, value in dict.items %}
- 使用循环来取
-
3.4 template中dict无法排序问题,
- 使用
{{ for key, value in dict.items|dictsort:0 }}针对给定的index (此处是0，所以就是依据key) 进行过滤
- 使用
<body>
{% for k, v in pre_stat.items|dictsort:0 %}
{% if k %}
{{ k }}
{{ v }}
{% else %}
<p> nothing to show </p>
{% endif %}
{% endfor %}
</body>(另外也可自行写templatetag函数来进行dict过滤)
