技术标签: # django echarts 前端 javascript
echarts官网Apache ECharts
1、前提:创建好了django框架
2、在django框架中使用echarts数据可视化之前,需要打开echarts官网,先下载echarts.js
(1)点击“下载-->下载”
(2)选择一下的两种方式的任意一种:
点击“dist”,打开了Github的项目文件,根据需要从“Github下载编译产物”即可:
(1)点击“示例”,选择想要的图形,这里我随便选择的是柱状图中的渐变柱状图
打开后是这个样子:
(2)点击“下载示例”,下载这个渐变柱状图的html文件
(3)下载成功之后,打开:
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-gradient
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{
{version}}/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
// prettier-ignore
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
// prettier-ignore
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
title: {
text: '特性示例:渐变色 阴影 点击缩放',
subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
color: '#fff'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999'
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{
type: 'bar',
showBackground: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
},
data: data
}
]
};
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
(4)复制下图中红线框里的src里的url地址,使用浏览器打开,
(5)按住“Ctrl+A”全选,进行复制“Ctrl+v”
进入到django中,在static/disk/js文件夹下新建一个js文件“echarts.js”
打开“echarts.js” ,将复制内容粘贴过去
(6) 在template下新建一个show.html文件,
我这里是在我的django框架的template/web/下新建了一个show.html文件,
(6)将之前下载的示例html文件里的内容复制粘贴到新建的show.html文件里,
并修改script标签的src属性值(改为自己新建的echarts.js文件所在位置)
我是在static/disk/js文件夹下新建一个js文件“echarts.js”
因此我的src应该写为
{% static 'dist/js/echarts.js' %}而且还需在show.html文件最上方加上
{% load static %}
(7)修改django项目的应用web里的web/urls.py文件:
在web/urls.py的路由里添加:
path('web/show/', views.web_show, name="web_show"),
这样就可以通过该路径访问到show.html了。
(10)Django使用自己的Templates模板进行HTML渲染控制,因此我们需要使用Django的render()函数给用户返回可视化的图表页面。
在django项目的应用web里的web/views.py文件下添加函数“web_show”:
from datetime import datetime
from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.urls import reverse
from myadmin.models import User, Company, Job
# Create your views here.
def web_show(request):
return render(request, "web/show.html")
(9)修改之后,运行django项目,在浏览器输入
然后echarts图就显示出来了。
文章浏览阅读409次。1:找到windows-》System32-》drivers-》etc-》host-》配置域名(0.0.0.0 account.jetbrains.com)2:打开浏览器http://idea.lanyus.com/ 获取注册码3:复制注册码 ,注册时切换至Activation Code选项4:OK。_phpstrom2018.2.3
文章浏览阅读261次。原因:环境阻光(AO)的设置不当,导致模型结构转变处产生过多的暗部阴影,从而使渲染图像呈现出颗粒感和模糊。原因:3dmax中的材质细分不够,影响渲染效果,导致图像出现颗粒感和噪点。原因:3dmax中的图像尺寸过低,导致渲染后的效果图呈现出颗粒感和噪点。原因:发光贴图和灯光缓存的设置不当,导致渲染图像出现颗粒感和噪点。原因:3dmax中的主光源灯光细分不够,导致渲染图像有颗粒感。原因:DMC采样的参数设置不合理,导致渲染图像出现噪点。按照这些设置,通常可以避免图像出现噪点。,从而避免渲染后的模糊和噪点。_3dmax噪点多怎么解决
文章浏览阅读1.2k次。我们都知道,以往的CSR(客户端浏览器渲染)多多少少会有一点点SEO问题,不只是SPA(单页面应用程序),只不过SPA的SEO问题比较严重,一般的前端项目有很多个页面,渲染的压力是分散的,所以页面渲染速度很快,基本够爬虫抓到很多内容,但SPA只有一个页面。而我们的SSR(服务器渲染)可以弥补像SPA项目的SEO(搜索引擎优化) 不友好问题。但是它本身对比CSR也是有不足的。所以,为什么不可以结合它们两个的优点去进行使用呢?_next同时使用ssr与csr
文章浏览阅读503次。2022 IOS Developer for funBasic stuffComputer Science fundamentalsMain parts of a computer system - CPU, memory, storageHow Operating System worksWhat is a databaseHow Internet worksGit version controlObject Oriented ProgrammingThe setupMacOSHomeb_um-ios 2022
文章浏览阅读109次。业务需求是:读取某个表中每一行的的字段A、B、C的值如果C的值是0,就改成1或者2代码大概是这么写的:$query = "SELECT * FROM table WHERE C = 0";$result = mysqli_query($link, $query);if($result){while ($rows = mysqli_fetch_array($result)){if (判断条件为tru..._while循环报错php
文章浏览阅读3.4k次。最近公司在使用ionic做混合APP,虽然是最后端,但是也查一下东西,介绍一下吧这是菜鸟教程的Ionic一.介绍ionic是一种老式的使用H5开发iOS和Android应用的方式,也可以使用新的语言React Native开发,当然对于H5实现复杂的或者交互性没有那么好的,就可以使用iOS和Android的插件实现;二.Ionic特点a.开发方面:1.ionic 基于Angular..._ionic
文章浏览阅读2w次,点赞6次,收藏26次。demo地址代码如下:Html<div id="app"> <el-select v-for="(arrItem,key) in selectList" :key="key" v-model="selectArr[key]" filterable placeholder="请选择" value-key="value" @change="selected" @focu..._element-ui select 级联
文章浏览阅读123次。76. 最小覆盖子串_leetcode最小覆盖子串
文章浏览阅读112次。https://download.csdn.net/download/u014096024/21109113oracle练习1.如何查询一个角色包括的权限 a.一个角色包含的系统权限 select * from dba_sys_privs where grantee='DBA'; b.一个角色包含的对象权限2.oracle究竟有多少种角色 (查询oracle中所有的角色,一般是dba) select * from dba_roles;3.查询o..._oracle查询导入目录常用语句
文章浏览阅读9.3k次,点赞25次,收藏93次。随着DT时代的到来,传统的统计图表很难对复杂数据进行直观地展示。这几年数据可视化作为一个新研究领域也变得越来越火。成功的可视化,如果做得漂亮,虽表面简单却富含深意,可以让观测者一眼就能洞察事实并产生新的理解。可视化(visualization)和可视效果(visual)两个词是等价的,表示所有结构化的信息表现方式,包括图形、图表、示意图、地图、故事情节图以及不是很正式的结构化插图。基本的可视化展..._数据可视化经典
文章浏览阅读1.3k次。注:本文由不愿透露姓名的 @Bulingxx 撰写。以下为正文。在上一篇文章中介绍了数码管如何在FPGA开发板上实现动态显示,其文章链接如下:人生状态机:[走近FPGA]之数码管动态显示zhuanlan.zhihu.com本文的所有实例都使用硬木课堂Xilinx Aritx 7 FPGA板实现,且附有上板演示视频,该开发板的链接如下:硬木课堂 Xilinx Aritx 7 FPGA板 Arm C..._8086汇编语言 实现二进制数到bcd码的转换
文章浏览阅读1.7k次。将nfs作为mysql的数据目录输出后,在另一台主机上启动mysql进程时,会出现如下这样的错误,究其原因,其实还是nfs自身设计的缺陷。 初始化就是使用特定的用户,去特定的目录去更新mysql,虽然说添加mysql用户之后,所有的对数据的修改权限都是以mysql用户执行的,而且nfs的数据目录也都设计成了mysql,常理是没有问题的。但是,执行mysql_ins_influxdb数据库 nfs存储初始化失败