devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

《数据分析-Echarts》Python + Django + echarts图表展示_echarts+django

作者：2023面试高手 | 2024-02-29 10:10:05

赞

踩

echarts+django

Python + Django + echarts图表展示

项目打包文件

一、准备工作

## 1.python环境安装
## 2.python开发工具PyCharm安装

  • 1
  • 2

二、创建Django项目

在这里插入图片描述

三、Terminal

在这里插入图片描述

四、安装Django模块

在terminal下输入命令安装：
可以先使用pip list查看已安装的模块
PS D:\date\PyCharm\djangoProject>  pip list
继续使用pip install django命令安装django模块
PS D:\date\PyCharm\djangoProject>  pip install django

  • 1
  • 2
  • 3
  • 4
  • 5

五、创建web项目

# 创建项目目录
PS D:\date\PyCharm\djangoProject>django-admin startproject www

# 打开项目目录
PS D:\date\PyCharm\djangoProject>cd www


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

项目目录

在这里插入图片描述

static目录文件

导入echarts.min.js 和 jquery-2.2.4.js文件

Github方式下载

Gitee方式下载

博客方式下载

templates目录文件

创建index.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document01</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: rgb(188, 227, 236);
        }
    </style>
</head>
<body>
	<!-- 2.准备具有大小的DOM容器 -->
    <div class="box"></div>

    <script type="text/javascript" src="static/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="static/echarts.min.js"></script>
    <script>
        //3.初始化实例对象 echarts.init(dom容器)
        var myChart = echarts.init(document.querySelector(".box"));
        //4.指定配置项和数据
        var option = {
            // 标题组件
            title: {
                text: 'ECharts 入门示例'
            },
            // 提示框组件
            tooltip: {},
            //图例组件
            legend: {
                data:['销量']
            },
            // 直角坐标系grid中的x轴
            // -boundaryGap:坐标轴两边留白策略true，这时候刻度只是作为分割线，标签和数据点都会在两个刻度之间带(band)中间
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            // 直角坐标系grid的y轴
            yAxis: {},
            // 系列列表，每个系列通过type决定自己的图标类型
            // 通俗的理解：图标数据，通过什么类型的图标，可以多个图标重叠
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
            // grid:直角坐标系内绘图网格
            // color:调色盘颜色列表
            // stack:数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
        };
        //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

www目录文件调整

views.py_视图文件

from django.shortcuts import render

'''调用HTML模版'''
def index(request):
    title = "漏刻有时数据可视化-主线图"
    return render(request, 'index.html', {"name": title})


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

urls.py_路径映射

'''导入视图'''
from django.urls import path
from . import views

'''配置url规则'''
urlpatterns = [
    path('', views.index),
]


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

settings.py_配置文件

修改以下内容:模版文件路径配置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(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',
            ],
        },
    },
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
修改以下内容:静态文件路径配置
# 配置静态文件路径；
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]


  • 1
  • 2
  • 3
  • 4

六、启动项目

PS D:\date\PyCharm\djangoProject> cd www
PS D:\date\PyCharm\djangoProject\www> python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
Run 'python manage.py migrate' to apply them.
March 29, 2022 - 21:03:14
Django version 3.2.12, using settings 'www.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

http://127.0.0.1:8000/
在这里插入图片描述

七、更换模板

echarts官网模板

在这里插入图片描述

PPChart

在这里插入图片描述

举例：

例如我们想使用这个模板

在这里插入图片描述

点进去后，复制左边的代码

在这里插入图片描述

只需替换index.html中option的代码块就可以

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document01</title>
    <style>
        .box{
            width: 1250px;
            height: 550px;
            background-color: rgb(188, 227, 236);
        }
    </style>
</head>
<body>
	<!-- 2.准备具有大小的DOM容器 -->
    <div class="box"></div>

    <script type="text/javascript" src="static/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="static/echarts.min.js"></script>
    <script>
        //3.初始化实例对象 echarts.init(dom容器)
        var myChart = echarts.init(document.querySelector(".box"));
        //4.指定配置项和数据
        var option = {
          color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
          title: {
            text: 'Gradient Stacked Area Chart'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Line 1',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [140, 232, 101, 264, 90, 340, 250]
            },
            {
              name: 'Line 2',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(0, 221, 255)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(77, 119, 255)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 282, 111, 234, 220, 340, 310]
            },
            {
              name: 'Line 3',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(55, 162, 255)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(116, 21, 219)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [320, 132, 201, 334, 190, 130, 220]
            },
            {
              name: 'Line 4',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 0, 135)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(135, 0, 157)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 402, 231, 134, 190, 230, 120]
            },
            {
              name: 'Line 5',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              label: {
                show: true,
                position: 'top'
              },
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 191, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(224, 62, 76)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 302, 181, 234, 210, 290, 150]
            }
          ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212

运行

PS D:\date\PyCharm\djangoProject\www> python manage.py runserver

  • 1

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/165006
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号