前言

学无止境，无止境学。大家好，我是张大鹏，之前在抖音有5万多粉丝，不过现在不拍视频，专心写公众号了。笔者目前是高级Python工程师，之前是全栈工程师，主要擅长Golang和Python开发，对于Java，Vue，React也有一些研究。工作之余，喜欢学习和分享，希望能够通过此公众号”张大鹏520″，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

今天要给大家分享的是《Django整合Bootstrap和Echarts实战》，这是一个非常基础但是功能比较完备的案例。在本教程中，我会带领大家从项目创建到项目整合，完成一套基础的项目环境。

如果大家需要本教程的PDF电子书或者完整的源码，可以在文末找到获取方式哈。

创建项目

创建项目：

django-admin startproject z02_django_vue_echarts

创建静态目录：

cd z02_django_vue_echarts
mkdir static

引入echarts和bootstrap的资源文件到static目录中，大家可以自行在网上搜索下载，也可以在文末留言获取。

创建模板目录：

mkdir templates

创建应用

创建一个应用：

python manage.py startapp index

在配置中注册应用：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'index',
]

在配置文件中配置模板目录：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / "templates"],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

在配置文件中配置静态文件：

STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_URL = '/static/'
if not DEBUG:
    STATIC_ROOT = BASE_DIR / 'static'

创建路由

总路由：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("index.urls")),
]

index应用中的路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index),
]

创建视图函数

from django.shortcuts import render


def index(request):
    return render(request, "index.html")

创建模板

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{% static 'plugins/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'plugins/echarts.min.js' %}"></script>
    <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="{% static 'plugins/bootstrap.bundle.min.js' %}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    let option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>