echarts python源码_基于Django快速集成Echarts代码示例
1.在线定制下载echarts
2.创建一个django项目或者在已有的项目
配置文件中确保数据库配置、static配置、与添加项目名到INSTALLED_APPS下。
配置静态文件目录static,目录下创建:css、img、js。
保存echarts.min.js到js目录下。
创建templates文件,html文件放到此目录。
快速静态测试
test.html文件
ECharts
{% load static %}
// 基于准备好的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);
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
test1.html
ECharts
{% load static %}
// 基于准备好的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);
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地址:
echarts异步更新数据
test2.html文件
Title
{% load static %}
$(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();
};
});
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请求,响应内容')
echarts异步加载+异步更新
在上个示例的基础上,修改test2.html如下:
Title
{% load static %}
$(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();
};
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
echarts python源码_基于Django快速集成Echarts代码示例相关推荐
- echarts python源码_基于Echarts的微代码开发平台SmartChart, 免费开源使用
A platform that Connect Data to Echarts. 简介 SmartChart基于Echarts/Django的微代码开发平台,适用于任何WEB项目 简单, 敏捷, 高效 ...
- python提取发票信息发票识别_(附完整python源码)基于tensorflow、opencv的入门案例_发票识别二:字符分割...
(附完整python源码)基于tensorflow.opencv的入门案例_发票识别二:字符分割 发布时间:2018-05-14 20:16, 浏览次数:1201 , 标签: python tenso ...
- 用python做炒股软件-python程序源码_基于python的炒股软件
股票模拟交易系统设计与实现 不但能够进行界面的设计,还可以实现各个窗口的关联,通过WPF实现和其余窗口的关联,而且WPF中的类不但能够和其中一个窗口进行关联,还可以跟许多功能操作接口,WPF在对窗口对 ...
- ThinkPHP php 仿千图网源码_基于ThinkPHP5框架开发的多功能内容管理系统
会员优惠 会员优惠 月费会员8折.年费会员5折.永久会员免费 源码介绍 基于ThinkPHP5框架开发的多功能内容管理系统PHP源码,基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升 ...
- 附完整python源码)基于tensorflow、opencv的入门案例_发票识别一:关键区域定位
发票识别一:从一张发票照片精确定位出"发票号码"."发票代码"的数字区域 注:该代码适用于 "国税通用机打发票".尽量拍摄下正常摆放的完整发 ...
- (附源码)基于django校园宿舍管理系统-计算机毕设84831
django校园宿舍管理系统 摘 要 本论文主要论述了如何使用Django开发一个校园宿舍管理系统,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发.在引言 ...
- 跳一跳python源码_使用Python实现跳一跳自动跳跃功能
使用Python实现跳一跳自动跳跃功能 来源:中文源码网 浏览: 次 日期:2019年11月5日 [下载文档: 使用Python实现跳一跳自动跳跃功能.txt ] (友情提示:右键点上行 ...
- java 优秀源码_想要快速进阶Java架构师?这份超强(长)学习计划单 请签收!...
优秀工程师的成长之路就是一条不断打怪升级之路的"修仙之路"! 而Java程序员一向比别人更难,如果说大家都在修仙的话,java程序员简直神似"剑修",入行枯燥精 ...
- fama matlab源码_基于优化算法改造的Fama-French三因子模型
基于光大证券金融工程研报<站在巨人的肩膀上,从牛基组合到牛股发现 --FOF 专题研究系列之十六 >中提及的Carhart四因子Alpha优化模型,本文在Fama-French三因子模型上 ...
最新文章
- 专访清华AIR院长张亚勤:AI在疫情中很重要,但却很「表面」
- 【谷歌推网页爬虫新标准,开源robots.txt解析器】
- Java黑皮书课后题第6章:*6.39(几何:点的位置)编程练习题3.32显示如何测试一个点是否在一个有向直线的左侧、右侧或在直线上,编写一个程序,输入三个点p0p1p2,显示p2是否在直线p0p1
- Rundll32使用技巧
- 从零开始学习springBoot(Contextpath+修改默认idk)
- node.js读写文件
- Globe宣布将在Balancer拍卖14,000,000枚GDT代币
- HTTP缓存策略 304
- OpenCV视频生成报错 Incorrect library version loaded Could not open codec ‘libopenh264‘: Unspecified error
- gxworks2软件测试对话框,超实用!GX Works2软件的启动与窗口功能应用
- java下载不了_教大家电脑java安装不了怎么办
- win10计算机盘符如何,删除win10电脑多余无需使用的盘符教程
- TRAS为springcloud提供高性能的RPC能力
- java web 错误处理实例_javaweb异常提示信息统一处理(使用springmvc,附源码)
- pacman 升级软件包提示 “failed to commit transaction (invalid or corrupted package)“
- 计算机网络 王道考研2021 第六章:应用层 -- 域名系统 DNS、域名解析
- gmx_MMPBSA.py的安装及使用--只翻译部分内容,具体可参考官方文档(https://valdes-tresanco-ms.github.io/gmx_MMPBSA/dev/)
- PHP 文件下载 浅析
- 启动管理-启动流程-启动过程(有流程图)
- python画出的图_Python 画出来六维图
热门文章
- 李宏毅机器学习完整笔记发布,AI界「最热视频博主」中文课程笔记全开源
- php添加公告代码,为wordpress增加网站公告功能
- 查看oracle压力,一个很简单测试oracle压力方法
- python celery异步_【Python】Celery异步处理
- 从零开始数据科学与机器学习算法-逻辑回归-04
- ajax请求后台表格数据,商品后台表格数据的展现方式
- [Catalan数三连]网格有趣的数列树屋阶梯
- 我的博客园第一个博客.
- Python(七) 元组+集合+随机+string
- 100+经典Java面试题及答案解析