django之 echarts数据可视化

echarts官网Apache ECharts

1、前提：创建好了django框架

2、在django框架中使用echarts数据可视化之前，需要打开echarts官网，先下载echarts.js

第一种方法：

（1）点击“下载-->下载”

（2）选择一下的两种方式的任意一种：

点击“dist”，打开了Github的项目文件，根据需要从“Github下载编译产物”即可：

 

重点描述 第二种方法：

（1）点击“示例”，选择想要的图形，这里我随便选择的是柱状图中的渐变柱状图

 打开后是这个样子：

 （2）点击“下载示例”，下载这个渐变柱状图的html文件

（3）下载成功之后，打开：

    
        
    
    
        

        
        
        
        
        
        
        {version}}/dist/extension/bmap.min.js">
        -->

        
    

    

 （4）复制下图中红线框里的src里的url地址，使用浏览器打开，

 

（5）按住“Ctrl+A”全选，进行复制“Ctrl+v”

进入到django中，在static/disk/js文件夹下新建一个js文件“echarts.js” 

打开“echarts.js” ，将复制内容粘贴过去

（6） 在template下新建一个show.html文件，

我这里是在我的django框架的template/web/下新建了一个show.html文件，

 （6）将之前下载的示例html文件里的内容复制粘贴到新建的show.html文件里，

并修改script标签的src属性值（改为自己新建的echarts.js文件所在位置）

我是在static/disk/js文件夹下新建一个js文件“echarts.js” 

因此我的src应该写为

{% static 'dist/js/echarts.js' %}

而且还需在show.html文件最上方加上

{% load static %}

 （7）修改django项目的应用web里的web/urls.py文件：

 在web/urls.py的路由里添加：

path('web/show/', views.web_show, name="web_show"),

这样就可以通过该路径访问到show.html了。

（10）Django使用自己的Templates模板进行HTML渲染控制,因此我们需要使用Django的render()函数给用户返回可视化的图表页面。

在django项目的应用web里的web/views.py文件下添加函数“web_show”：

from datetime import datetime
from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.urls import reverse
from myadmin.models import User, Company, Job


# Create your views here.
def web_show(request):
    return render(request, "web/show.html")

（9）修改之后，运行django项目，在浏览器输入

http://127.0.0.1:8000/web/show/

然后echarts图就显示出来了。