首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

基于Django快速集成Echarts代码示例

Posted in Python onDecember 01, 2020

1.在线定制下载echarts

https://echarts.apache.org/zh/builder.html

2.创建一个django项目或者在已有的项目

  • 配置文件中确保数据库配置、static配置、与添加项目名到INSTALLED_APPS下。
  • 配置静态文件目录static，目录下创建：css、img、js。
  • 保存echarts.min.js到js目录下。
  • 创建templates文件，html文件放到此目录。

快速静态测试

test.html文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  {% load static %}
  <script src="{% static '/js/echarts.min.js' %}"></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var 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>

urls文件

from django.urls import path
from app.views import TestView
urlpatterns = [
  path('test/',TestView.as_view()),
]

Views文件

from django.shortcuts import render
from rest_framework.views import View
from rest_framework.response import Response


class TestView(View):
  def dispatch(self, request, *args, **kwargs):
    """
    请求到来之后，都要执行dispatch方法，dispatch方法根据请求方式不同触发 get/post/put等方法

    注意：APIView中的dispatch方法有好多好多的功能
    """
    return super().dispatch(request, *args, **kwargs)

  def get(self, request, *args, **kwargs):
    return render(request, "test.html")

  def post(self, request, *args, **kwargs):
    return Response('POST请求，响应内容')

  def put(self, request, *args, **kwargs):
    return Response('PUT请求，响应内容')

Views文件

访问url地址：

基于Django快速集成Echarts代码示例

django获取数据库中的数据传递给echarts

test1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  {% load static %}
  <script src="{% static '/js/echarts.min.js' %}"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  console.log(name)
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: {{ name|safe }}
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data:{{ data|safe }}
    }]
  };

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

urls文件

from django.urls import path
from app.views import TestView1

urlpatterns = [
  path('test1/',TestView1.as_view()),
]

Views文件

from django.shortcuts import render
from rest_framework.views import View
from rest_framework.response import Response

class TestView1(View):
  def dispatch(self, request, *args, **kwargs):
    """
    请求到来之后，都要执行dispatch方法，dispatch方法根据请求方式不同触发 get/post/put等方法

    注意：APIView中的dispatch方法有好多好多的功能
    """
    return super().dispatch(request, *args, **kwargs)

  def get(self, request, *args, **kwargs):
    name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    data = [56, 40, 54, 23, 12, 31]
    return render(request, "test1.html",{"name":name,"data":data})

  def post(self, request, *args, **kwargs):
    return Response('POST请求，响应内容')

  def put(self, request, *args, **kwargs):
    return Response('PUT请求，响应内容')

注意：我在views文件中直接返回数据，在html模板中使用标签渲染，如果你需要使用ORM从数据库拿数据，可以做如下操作：

wheelsList = Wheel.objects.all()
name = list(Wheel.objects.values_list('name', flat=True))
data = list(Wheel.objects.values_list('trackid', flat=True))

访问url地址：

基于Django快速集成Echarts代码示例

echarts异步更新数据

test2.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入 jquery.js-->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <!-- 引入 echarts.js -->
  {% load static %}
  <script src="{% static '/js/echarts.min.js' %}"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
  $(function () {
    var server_info;
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: {{ name | safe }}
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: {{ data | safe }}
      }]
    };
    myChart.setOption(option, true);

    setInterval( function () {

        $.ajax({
          type: 'GET',
          url: '/test1_api/',
          dataType: 'json',
          success: function (arg) {
            server_info = eval(arg);
            option.xAxis.data = server_info.name;
            option.series[0].data = server_info.data;
          }
        });
          myChart.setOption(option, true);
        }, 2000);
     window.onresize = function () {
      myChart.resize();
    };
  });
  </script>
</body>
</html>

urls文件

from django.urls import path
from app.views import TestView,TestView1,TestView1api

urlpatterns = [
  path('test2/',TestView1.as_view()),
  path('test1_api/',TestView1api.as_view()),
]

View文件

from django.shortcuts import render
from rest_framework.views import View
from rest_framework.response import Response
from django.http import HttpResponse


class TestView1(View):
  def dispatch(self, request, *args, **kwargs):
    """
    请求到来之后，都要执行dispatch方法，dispatch方法根据请求方式不同触发 get/post/put等方法

    注意：APIView中的dispatch方法有好多好多的功能
    """
    return super().dispatch(request, *args, **kwargs)

  def get(self, request, *args, **kwargs):
    name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    data = [56, 40, 54, 23, 12, 31]
    return render(request, "test2.html",{"name":name,"data":data})

  def post(self, request, *args, **kwargs):
    return Response('POST请求，响应内容')

  def put(self, request, *args, **kwargs):
    return Response('PUT请求，响应内容')


count = 1
class TestView1api(View):
  def dispatch(self, request, *args, **kwargs):
    """
    请求到来之后，都要执行dispatch方法，dispatch方法根据请求方式不同触发 get/post/put等方法

    注意：APIView中的dispatch方法有好多好多的功能
    """
    return super().dispatch(request, *args, **kwargs)

  def get(self, request, *args, **kwargs):
    global count
    name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    data = [56+count, 40+count, 54+count, 23+count, 12+count, 31+count]
    count = count + 1
    print(data)
    print(count)
    ret = {'name': name, 'data': data}
    return HttpResponse(json.dumps(ret))


  def post(self, request, *args, **kwargs):
    return Response('POST请求，响应内容')

  def put(self, request, *args, **kwargs):
    return Response('PUT请求，响应内容')

基于Django快速集成Echarts代码示例

echarts异步加载+异步更新

在上个示例的基础上，修改test2.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入 jquery.js-->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <!-- 引入 echarts.js -->
  {% load static %}
  <script src="{% static '/js/echarts.min.js' %}"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
  $(function () {
    var server_info;
    // 基于准备好的dom，初始化ECharts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: []
      }]
    };
    myChart.setOption(option, true);
    // 异步加载json格式数据
    $.getJSON('http://127.0.0.1:8080/test1_api/', function (data) {
      myChart.setOption({
        xAxis: {
          data: data.name
        },
        series: [{
          // 根据名字对应到相应的系列
          data: data.data
        }]
      });
    });
    // ajax异步更新json格式数据
    setInterval( function () {
        $.ajax({
          type: 'GET',
          url: '/test1_api/',
          dataType: 'json',
          success: function (arg) {
            server_info = eval(arg);
            option.xAxis.data = server_info.name;
            option.series[0].data = server_info.data;
          }
        });
          myChart.setOption(option, true);
        }, 2000);
     window.onresize = function () {
      myChart.resize();
     };

  });
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于Django快速集成Echarts代码示例

- Author -

-零

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
Python和JavaScript间代码转换的4个工具
Feb 22 Python
python与php实现分割文件代码
Mar 06 Python
python密码错误三次锁定(实例讲解)
Nov 14 Python
Python使用matplotlib实现绘制自定义图形功能示例
Jan 18 Python
python实现内存监控系统
Mar 07 Python
django框架实现模板中获取request 的各种信息示例
Jul 01 Python
django创建超级用户过程解析
Sep 18 Python
window环境pip切换国内源（pip安装异常缓慢的问题）
Dec 31 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
Apr 07 Python
python 读txt文件,按‘,’分割每行数据操作
Jul 05 Python
Jupyter安装链接aconda实现过程图解
Nov 02 Python
python神经网络Xception模型
May 06 Python
Python更改pip镜像源的方法示例
Dec 01 #Python
Python读取图像并显示灰度图的实现
Dec 01 #Python
Python性能测试工具Locust安装及使用
Dec 01 #Python
python爬虫中抓取指数的实例讲解
Dec 01 #Python
OpenCV灰度化之后图片为绿色的解决
Dec 01 #Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
Dec 01 #Python
python连接mongodb数据库操作数据示例
Nov 30 #Python
远程登录(2) Repository接口(3) systemctl(1) 3389(1) Ubuntu Server(6) 域控制器(1) FTP(9) Spring Data JPA(4) DHCP(2) 防火墙(2)
You might like
DIY实用性框形天线
2021/03/02 无线电
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
js计算页面刷新的次数
2009/07/20 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
javascript的BOM
2016/05/03 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python实现抖音点赞功能
2019/04/07 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
django配置app中的静态文件步骤
2020/03/27 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
文明餐桌活动方案
2014/02/11 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
《观舞记》教学反思
2014/04/16 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL