首页
所有分类
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黑帽编程 3.4 跨越VLAN详解
Sep 28 Python
使用Python &amp; Flask 实现RESTful Web API的实例
Sep 19 Python
python连接数据库的方法
Oct 19 Python
Apache,wsgi,django 程序部署配置方法详解
Jul 01 Python
python实现动态数组的示例代码
Jul 15 Python
Python从文件中读取指定的行以及在文件指定位置写入
Sep 06 Python
500行代码使用python写个微信小游戏飞机大战游戏
Oct 16 Python
在python中logger setlevel没有生效的解决
Feb 21 Python
使用keras实现densenet和Xception的模型融合
May 23 Python
Python实现自动签到脚本的示例代码
Aug 19 Python
Python批量修改xml的坐标值全部转为整数的实例代码
Nov 26 Python
解决virtualenv -p python3 venv报错的问题
Feb 05 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
ForkJoin(1) JAVA(88) CompletableFuture(1) 线程池(1) 主题(1) 池化技术(1) Android(19) Springboot-cli(1) 异步回调(1) FutureTask(3)
You might like
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python脚本实现12306火车票查询系统
2016/09/30 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python 多维List创建的问题小结
2019/01/18 Python
python文档字符串（函数使用说明）使用详解
2019/07/30 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python pillow库的基础使用教程
2021/01/13 Python
Made in Design德国：设计师家具、灯具和装饰
2019/10/31 全球购物
英国领先的男装设计师服装独立零售商：Repertoire Fashion
2020/10/19 全球购物
2014年巴西世界杯口号
2014/06/05 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
个人委托书范文
2015/01/28 职场文书
银行自荐信范文
2015/03/25 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
导游词之河北野三坡
2019/12/11 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
mybatis 获取更新记录的id
2022/05/20 Java/Android