首页
所有分类
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+matplotlib+numpy绘制精美的条形统计图
Jan 02 Python
对python 多个分隔符split 的实例详解
Dec 20 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
Jan 29 Python
wxpython绘制圆角窗体
Nov 18 Python
将python安装信息加入注册表的示例
Nov 20 Python
python实现图片插入文字
Nov 26 Python
tensorflow之并行读入数据详解
Feb 05 Python
Python工程师必考的6个经典面试题
Jun 28 Python
opencv 图像腐蚀和图像膨胀的实现
Jul 07 Python
详解在Python中使用Torchmoji将文本转换为表情符号
Jul 27 Python
Python模块zipfile原理及使用方法详解
Aug 04 Python
python 遍历磁盘目录的三种方法
Apr 02 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
sout(1) Sunmao(1) svg(1) 403(1) Sentry(1) win7(2) 蓝屏(1) 声卡驱动(1) 输入法(2) 滚动条(1)
You might like
收音机术语解释
2021/03/01 无线电
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php curl 上传文件代码实例
2015/04/27 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
js编写简易的计算器
2020/07/29 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python httplib模块使用实例
2015/04/11 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python文件读写代码实例
2019/10/21 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
美国家庭鞋店：Shoe Sensation
2019/09/27 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
关于读书的演讲稿
2014/05/07 职场文书
公司投资建议书
2014/05/16 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
python获取带有返回值的多线程
2022/05/02 Python