Python编程
搜索
分类

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

作者：-零 时间：2021-12-10 18:53:32　

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>

来源：https://www.cnblogs.com/-wenli/p/13368215.html

标签：Django,集成,Echarts
0
投稿

猜你喜欢

  • 简单掌握Python的Collections模块中counter结构的用法

    2023-05-17 00:20:13

  • php截取字符串函数分享

    2023-11-14 10:53:21

  • Python中如何向函数传递列表

    2022-09-23 19:10:23

  • 如何绝对获知浏览器类型？

    2009-12-16 18:58:00

  • 10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径

    2023-10-16 08:05:00

  • Keras自定义IOU方式

    2022-12-24 07:48:27

  • python下如何让web元素的生成更简单的分析

    2023-01-28 23:46:34

  • Python类和对象基础入门介绍

    2022-04-03 12:14:48

  • pytorch自定义不可导激活函数的操作

    2022-07-05 10:09:13

  • python 中if else 语句的作用及示例代码

    2023-04-17 00:52:35

  • pytorch 如何自定义卷积核权值参数

    2021-10-30 19:10:22

  • oracle 合并查询 事务 sql函数小知识学习

    2023-07-13 15:07:28

  • Study jQuery in a Simplified Way

    2010-01-30 12:55:00

  • python列表推导式的原理及使用方法

    2022-01-23 13:47:03

  • 在Python中使用gRPC的方法示例

    2021-02-02 16:20:21

  • Python实现字符串的逆序 C++字符串逆序算法

    2022-04-10 01:35:54

  • python requests使用socks5的例子

    2023-09-14 07:06:45

  • pytorch打印网络结构的实例

    2023-11-04 15:15:51

  • python避免死锁方法实例分析

    2023-08-04 04:32:59

  • 详解pandas数据合并与重塑（pd.concat篇）

    2023-06-02 00:05:37
    • asp之家 网络编程 m.aspxhome.com