如何使用echarts(包含自己对于django的理解)

原创 2018年04月17日 21:52:30

0.本项目适用于django2.0,python3。同时使用的IDE为:pycharm-professional

1.首先创建自己的django项目,django自强学堂,这个链接有详细的django学习方法;接着在自己的项目中创建一个APP,在APP的目录下创建一个static文件夹(这个是存放静态文件,我们本次使用的有js库以及json文件),与一个templates文件夹。总之我们可以获得一个类似于下图的结构(本图引用于自强学堂——Django 模板):

zqxt_tmpl
├── learn
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── home.html
│   ├── tests.py
│   └── views.py
├── manage.py
└── zqxt_tmpl
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

2.我们找到echarts官网echarts官网,点击实例我们就可以看到官网上给的所有例子


这里我们随意选择一个实例,我们可以看到官网所写的JavaScript代码以及所展示的结果图:


在右下角我们可以看到一个下载的按钮,我们点击下载得到官网所给的html文件,我们将这个文件放入我们所创建的app文件夹的templates文件夹中,利用notepad++打开这个html文件,我们可以看到该案例所导入的js文件:


当然一般而言我们并不需要调用如此多的js文件,我们通常需要使用echarts.js(这个包含了所有的图表),其它的你可以看案例所给的js文件,然后自己去echart所需的js库中有选择的下载,当然有些js库并不在里面所有就需要自己去百度了。下载的js库我们选择放入所创建的app文件夹中的static中,这里一般存放的是网站所需的静态文件。最后我们修改前面的script结构:

<script type="text/javascript" src="../static/js/dist-stat/ecStat.js"></script>

请注意这里的src=""中输入的相对路径,原因是在django的settings.py文件中,它规定了static的文件位置

STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)

3.以上就可以在自己的网志中打开这个例子了,一开始操作这个东西遇到了不少问题,主要是自己主要做的是python相关的东西,第一次接触django特别是html语言时有些懵,但是通过同学的帮助最后解决了许多问题。

1)关于调用的js库时,一定要使用相对路径不能使用绝对路径。

2)作为django的调试工具,我是使用在一些自己不确定的html文件的代码中利用document.write(str:string)进行调试,如果代码能够执行这段代码就可以在网页中打印出str的内容。

4.下节我将介绍如何在django调用json文件

Python Django+Echarts将数据作可视化输出

以上为最终结果 Django是开放源代码的Web应用框架,由Python语言编写。 pip3 install django安装Django,并加入系统变量Path。 创建Django项目,并在...
  • kissazhu
  • kissazhu
  • 2017-09-30 13:47:42
  • 3481

【PythonDjango后台实例 第四章】Python3.6.1+Bootstrap3+echarts 在HTML网页中使用echarts展示图表

本文章解决的问题如下: 能够在Django框架下使用echarts.js制作简单的可视化展示 本文章环境需要: echarts官方主页 : http://echarts.baidu.com/ind...
  • teavamc
  • teavamc
  • 2017-08-14 18:35:22
  • 3457

【python 可视化】pyecharts + Django 使用指南

本指南按照 Django 官方教程,通过完成一个 Django 小项目来说明如何在 Django 中使用 pyecharts。如果对 Django 还不太熟悉的开发者,可仔细阅读官方提供的最新文档。 ...
  • u013421629
  • u013421629
  • 2017-10-10 14:35:29
  • 3584

django开发web小项目

django开发web小项目引言近期使用django开发了个小web项目,使用了bootstrap模板样式,以及echart图形控件,在这里对它们的基本使用做一些小总结.Whydjango是由pyth...
  • lookqlp
  • lookqlp
  • 2015-12-22 14:19:46
  • 6829

web数据可视化——django+echarts

django网页呈现echarts图表
  • cmdangdang
  • cmdangdang
  • 2016-08-06 10:10:21
  • 5974

利用爬虫和Django+echarts建立自己的动画人气统计小站

开发环境:Django版本1.11.4,python版本3.6.0
  • s291547
  • s291547
  • 2017-09-02 00:58:33
  • 164

Django中从mysql数据库中获取数据传到echarts

尝试了几种方法,感觉过于复杂,于是自己写了一个方法。 (1)首先在要绘图的页面传入从数据库中提取的参数,这一步通过views可以实现; (2)然后是页面加载完成时执行的函数ready,调用方法f; ...
  • IqqIqqIqqIqq
  • IqqIqqIqqIqq
  • 2016-02-25 13:15:08
  • 3323

django+highcharts实现数据可视化

引言   Django是Python的一个Web框架,网站或者是App都可以通过这个框架进行开发。它是一个MVC框架,某些细节上和Google的Angular比较类似,比如需要设置路由表进行跳转等等...
  • u012751272
  • u012751272
  • 2018-02-28 14:21:08
  • 174

百度ECharts的使用

1、打开百度ECharts首页,在右上角点击github2、进入如图的页面,点击到最上级目录 3找到如图的文件夹,下载下来 4、解压之后的文件,进入public文件夹,点击index.html...
  • Fighting_studying
  • Fighting_studying
  • 2017-09-14 08:59:13
  • 163

利用django框架,手把手教你搭建数据可视化系统(一)

如何使用django去构建数据可视化的 web,可视化的结果可以呈现在web上。使用django的MTV模型搭建网站基础铺垫—MTV模型Created with Raphaël 2.1.0Reques...
  • jacky_zhuyuanlu
  • jacky_zhuyuanlu
  • 2017-09-26 13:38:25
  • 1427
收藏助手
不良信息举报
您举报文章:如何使用echarts(包含自己对于django的理解)
举报原因:
原因补充:

(最多只允许输入30个字)