在Django项目中用Echarts做数据可视化分析

柔情只为你懂 2023-07-11 11:06 1阅读 0赞

### 文章目录 ###

*   *  安装Echarts
     *  使用

## 安装Echarts ##

进入Echarts官网：[https://www.echartsjs.com/zh/index.html][https_www.echartsjs.com_zh_index.html]  
在上方菜单栏选择下载，进入到下面这个页面，从GItHub上下载：  
![在这里插入图片描述][20200305092744520.png]  
点击进入到GitHub主页：  
![在这里插入图片描述][20200305093112762.png]  
那如何在echarts项目下单独下载这个文件呢？  
点击进入Echarts.js，找到download按钮，右键点击选择另存为，就会自动下载好  
![在这里插入图片描述][20200305093335751.png]

## 使用 ##

将下载的echarts.js加入到存放静态文件的static的js下：  
![在这里插入图片描述][20200305114712377.png]  
在需要使用到echarts.js的HTML页面进行导入：  
![在这里插入图片描述][20200305114851835.png]  
最后在view中通过模板传递echarts数据表所需的数据及格式  
例如：  
在view中传递模板变量：

return render(request, 'index1.html', { 'all_source': result_source,
                                               'source': source,})

使用模板变量：

前端效果：  
![在这里插入图片描述][20200305115518805.png]

[https_www.echartsjs.com_zh_index.html]: https://www.echartsjs.com/zh/index.html
[20200305092744520.png]: https://img-blog.csdnimg.cn/20200305092744520.png
[20200305093112762.png]: https://img-blog.csdnimg.cn/20200305093112762.png
[20200305093335751.png]: https://img-blog.csdnimg.cn/20200305093335751.png
[20200305114712377.png]: https://img-blog.csdnimg.cn/20200305114712377.png
[20200305114851835.png]: https://img-blog.csdnimg.cn/20200305114851835.png
[20200305115518805.png]: https://img-blog.csdnimg.cn/20200305115518805.png