CodeSalt | Django + Echarts 实例

时间 2019-11-16

标签 codesalt django echarts 实例栏目 Python 繁體版

原文原文链接

CodeSalt | Django + Echarts 实例

因为近期须要熟悉Django、Echarts，所以经过本文记录实现Django + Echarts 两个小实例的过程，将分别使用不一样方式实现Web端Echarts图表的展现：javascript

使用pyecharts展现3D图
使用echarts.js展现折线图
后续Django在链接MySQL进行展现时可能遇到的一些问题

0 前期准备

环境+Django准备html
- 虚拟环境java
  - 使用指定版本Python(本文使用python3.5)，建立名为djangovenv的虚拟环境python
    - $ virtualenv --python=/Library/Frameworks/Python.framework/Versions/3.5/bin/python3.5 djangovenv
  - 激活虚拟环境mysql
    - $ source ~/venv/djangovenv/bin/activate
  - 安装Django 1.11.4、pyechartsgit
    - $ pip install django==1.11.4
    - $ pip install pyecharts
  - 建立Django Project、Django Appgithub
    - 建立名为mychartsite的Projectsql
      - $ 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

安装django
- $ 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过滤)