Python + Django + echarts图表展示

项目打包文件

一、准备工作

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

二、创建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

五、创建web项目

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

项目目录

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>

www目录文件调整

views.py_视图文件

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

urls.py_路径映射

'''导入视图'''
from django.urls import path
from . import views'''配置url规则'''
urlpatterns = [path('', views.index),
]

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',],},},
]

修改以下内容:静态文件路径配置

# 配置静态文件路径；
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

六、启动项目

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.

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>

运行

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

《数据分析-Echarts》Python + Django + echarts图表展示相关推荐

echarts实现百分比进度图表展示（两种风格）
类型一:完整圆环型效果图代码示例 function PercentPie(option){this.backgroundColor = option.backgroundColor||'#ffff ...
python制作股票图表怎么看_Python 数据可视化实战：使用 PyQt5 和 Echarts 打造股票数据看板...
在一篇论文中,最吸引审稿人目光的莫过于枯燥的文字间精美的图表在一份项目路演 ppt 中,酷炫的财务报表往往是打动投资人的最后一剂强心剂作为数据分析最后也是最直接的一环,数据可视化的重要性不言而喻 ...
【Python爬虫+pyecharts可视化】爬取全国各地房价并在echarts的geo地图上展示
导言最近回归了可视化,写个文章总结一下经验教训,嘿嘿.不想看分析过程的可以点击目录,直接跳转到代码实现部分.(代码所用模块都是可以用 pip install 模块名下载的哟) 先看看最 ...
echarts python源码_基于Django快速集成Echarts代码示例
1.在线定制下载echarts 2.创建一个django项目或者在已有的项目配置文件中确保数据库配置.static配置.与添加项目名到INSTALLED_APPS下. 配置静态文件目录static, ...
knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示三.require的 ...
ECharts动态图表展示
1.首先简要的介绍一下Echarts: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯javascript的图标库,兼容当前绝大多数浏览器,提供直观,生动,可交互, ...
HTML按钮控制数据源 + echarts图表展示
HTML按钮控制数据源 + echarts图表展示时过匆匆,转眼见2018就剩下仅有的5天了,开心吗???2018的自己经历的许多许多,收获失败.痛苦快乐.酸甜苦辣都有.即将过去的12月特别的忙碌, ...
android bmob上传图片,Bmob+Android+ECharts 实现移动端数据上传与图表展示
Bmob:后端云全方位一体化的后端服务平台,无需再造应用后端服务轻松拥有开发中需要的各种后端能力. ECharts:开源图表库,丰富的可视化效果,多图表类型,满足不同数据的处理需求更多的搭配方案 ...
微信小程序中使用ECharts实现报表图表展示
Echarts可视化工具很方便的解决了统计图表的问题,但是微信小程序是不支持 DOM 操作,后来在Echarts官网找到了微信小程序的版本. 开始上代码了,首先要在index.wxml中定义,我要在一 ...

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

Python + Django + echarts图表展示

一、准备工作

二、创建Django项目

三、Terminal

四、安装Django模块

五、创建web项目

项目目录

static目录文件

templates目录文件

www目录文件调整

views.py_视图文件

urls.py_路径映射

settings.py_配置文件

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

修改以下内容:静态文件路径配置

六、启动项目

七、更换模板

举例：

运行

《数据分析-Echarts》Python + Django + echarts图表展示相关推荐

最新文章

热门文章