Django前端使用ECharts完成数据可视化

最新推荐文章于 2024-08-14 09:31:25 发布

麻辣拌拌

最新推荐文章于 2024-08-14 09:31:25 发布

阅读量4.1k

点赞数 1

分类专栏： Python 文章标签： django 前端 python echarts

本文链接：https://blog.csdn.net/FIRKUA/article/details/124074405

版权

Python 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Django项目中集成ECharts，包括下载ECharts库，设置Django静态文件，以及在HTML中引入和使用ECharts。通过示例展示了创建一个简单折线图的过程，帮助开发者快速理解和应用ECharts进行数据可视化。

摘要由CSDN通过智能技术生成

ECharts介绍：ECharts 首页

Echarts是商业级数据表，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。（来源于搜狗立知）

ECharts在前端（HTML）中的使用方法：ECharts官方教程

1、ECharts所需js下载：官方下载地址

点击Dist 进入GitHub中的下载链接

如果打不开的话，可以使用加速器加速GitHub的访问，比如使用网易uu加速器搜索“学术资源”进行加速

进入GitHub中选echart.min.js进行下载也可以根据图标需求选择其他辅助js

下载好的js文件我们把它放进Django静态文件库static目录下

在Django的settings.py中添加static

2、Django使用ECharts

首先，在html文件最开头写入｛% load static %｝引入静态文件

然后在html中引入echart.min.js

如：

<script type="text/javascript" src="｛%static 'echarts/dist/echarts.min.js'%｝"></script>

或者：

<script type="text/javascript"src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

之后再为图标准备一个容器

<div id="main03" style="width: 1100px;height:500px;"></div>#表格容器
                                        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
      <script type="text/javascript">
                                            // 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main03'));

                                            // 指定图表的配置项和数据
var option =

                                             

                                            // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
     </script>
</div>

然后到ECharts官网示例选择合适的表格形式

把左侧js中option的内容添加到刚刚的容器中

<div id="main03" style="width: 1100px;height:500px;"></div>#表格容器
                                        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
      <script type="text/javascript">
                                            // 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main03'));

                                            // 指定图表的配置项和数据
var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

                                             

                                            // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
     </script>
</div>

这样便可以运行出一个简单的折线图

之后通过改动data：中的内容便可以改变表的数据