CodeSalt | Django + Echarts 实例 - CodeSalt

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文件
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过滤)

CodeSalt | Django + Echarts 实例