django之 echarts数据可视化_django echarts-程序员宅基地

技术标签： # 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项目，在浏览器输入

http://127.0.0.1:8000/web/show/

然后echarts图就显示出来了。

本文链接：https://blog.csdn.net/qq_45956730/article/details/124511502

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

13. HTTP1.0 HTTP 1.1 HTTP 2.0主要区别_http 0.13.1-程序员宅基地

文章浏览阅读175次。HTTP1.0 HTTP 1.1 HTTP 2.0主要区别HTTP1.0 HTTP 1.1主要区别长连接节约带宽HOST域HTTP1.1 HTTP 2.0主要区别多路复用数据压缩服务器推送HTTP1.0 HTTP 1.1主要区别长连接HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接，而HTTP1.1默认支..._http 0.13.1

Webdynpro ABAP 简单剖析_abap webdynpro-程序员宅基地

文章浏览阅读1.7k次。众所周知，WEBDYNPRO是今天来SAP主推的一个面向WEB的MVC编程框架，接触过J2EE的朋友都不会对MVC这种设计模式陌生，WEBDYNPRO ABAP的基本设计思路和很多著名的面向互联网的MVC框架很相似（比如STRUCTS）SAPNETWEAVER 平台上也有WEBDYNPRO的一些标准应用，譬如PI RWB上面的ALERT CONFIGRATION功能，理解WEBDYNPRO的工作..._abap webdynpro

【spring cloud】spring cloud2.X spring boot2.0.4调用feign配置Hystrix Dashboard 和集成Turbine 【解决：Hystrix仪表盘...-程序员宅基地

文章浏览阅读311次。环境：<java.version>1.8</java.version><spring-boot.version>2.0.4.RELEASE</spring-boot.version><spring-cloud.version>Finchley.SR1</spring-cloud.version><lcn.last.v..._springboot 2.4 可以使用feign调用吗

Win7/Win10移动用户文件夹(C:\Users)移到非系统盘(如D:)_该应用程序位于未经授权的位置请移至非系统文件夹-程序员宅基地

文章浏览阅读8.8w次，点赞48次，收藏252次。Windows的用户文件夹默认所在位置是系统盘（通常是C盘）下的“\Users”目录之内。该文件夹中保存着所有的用户个人数据，比如你保存在“桌面”上的文件（实际上是保存在C:\Users\你的用户名\Desktop\目录之中），再比如你保存在“我的文档”里的文件（实际上是保存在C:\Users\用户名\Documents目录之中）。用户文件夹处于系统盘的坏处在于，如若系统盘一旦坏掉，就可能连带用..._该应用程序位于未经授权的位置请移至非系统文件夹

约瑟夫环的数学公式推导_约瑟夫出圈问题公式-程序员宅基地

文章浏览阅读6.7k次，点赞7次，收藏35次。约瑟夫环的数学方法解决编写约瑟夫环程序时会发现，当我们把整个报数过程的人数N变的很大，例如到几百万，虽然在最后还是只剩下两个人报数，但也要循环几百万次才能确定最后留下来的那个人。这样程序执行的效率不高，会占用大量时间去执行循环的过程。有时会发生输出一直等待很长时间才能出来结果。经过查询资料，找到了约瑟夫环的数学解决方法，以及它的算法具体执行的过程来做分享。我们假设..._约瑟夫出圈问题公式

软件测试|Pytest必会使用autouse实现自动传参-程序员宅基地

文章浏览阅读120次。1.薪资丰厚：基本薪资+绩效+项目奖金+年终奖2.福利：和正式员工福利基本看齐，共享工位，免费夜宵，班车，一流办公环境，月末周六双倍工资3.技术栈：C/C+当用例很多的时候，每次。不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦。不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦。

随便推点

Linux命令_禅道的运行日志放在哪-程序员宅基地

文章浏览阅读309次。笔记_禅道的运行日志放在哪

Web实训项目--网页设计（附源码）_web前端网页设计代码-程序员宅基地

文章浏览阅读4.3w次，点赞79次，收藏882次。我们要使用这些知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，JavaScript实现轮播图效果等。学习如何设计网页中的轮播图和动画效果，并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。通过对Web知识内容的了解，我们掌握了HTML、CSS和JavaScript的基本知识以及利用它们实现一些简单的应用。1、使用Web知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用。_web前端网页设计代码