【PythonDjango后台实例 第四章】Python3.6.1+Bootstrap3+echarts 在HTML网页中使用echarts展示图表
2017-08-14 18:35
1006 查看
本文章解决的问题如下:
能够在Django框架下使用echarts.js制作简单的可视化展示
本文章环境需要:
echarts官方主页 : http://echarts.baidu.com/index.html
echarts.js下载 : http://echarts.baidu.com/download.html
下载文件后放进自己的静态文件文件夹中,比方说
然后在需要使用的html页面中进行关联,比方说
注意,静态文件的位置一定要确定好,一定要弄清楚相对位置和绝对位置的含义,如果位置错误则会显示找不到静态包
我在这里示例一个百度官方的echarts.js的使用
我们可以尝试一个进阶图例,图例代码来源:http://gallery.echartsjs.com/editor.html?c=xH1PiorBb-
这样就完成了echarts在html页面中的调用,有人肯定就会说,我要怎么在模版页面里面使用echarts?
而不是霸占整个页面? 其实就是给这个图表一个容器就可以了。
我拿我自己的软件举一个例子:
现在看到我其中的一个页面是这样的,但是echarts并不是霸占整个页面,是因为我给网页中的所有元素都设置了容器。
可以看到这个图表就是在容器内
通过上图就可以看到我相关图表的代码,这其中涉及到了前端框架Bootstrap的相关技术
我简要解释一下: 1.代码中的row的容器代表我设置了一列容器 2.col-md-12的容器代表其占比是100%
3. 最后设置该图表id是echarts1(因为我在同一个页面设置了多个echarts),其图表的长宽分别是1600px和400px
通过容器的概念,我们就可以任意的在某个地方放置我们的echarts了
肯定还会有人问,那你的echarts配置语句呢?怎么只看到容器?
我的语句统一放在html页面下方,通过容器id=echarts1与图表js语句关联。
简单总结:
1. 下载echarts.js文件,并导入项目,让项目找得到它
2. 调用echarts文件,具体调用方法见百度官方使用说明:http://echarts.baidu.com/tutorial.htmlO#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
3.给一个网页容器把echarts装进去,更加美观
4.前端都涉及Html,CSS,JS等,只要不调用数据库和后台就涉及不到Django,所以放心的按照官方来做
下一章讲如何使用Django调用数据库给前台的echarts
有地方不懂的就在评论区问,有错误请指出,大家共同进步!
因本文不太严谨,所以严禁转载!
能够在Django框架下使用echarts.js制作简单的可视化展示
本文章环境需要:
echarts官方主页 : http://echarts.baidu.com/index.html
echarts.js下载 : http://echarts.baidu.com/download.html
下载文件后放进自己的静态文件文件夹中,比方说
然后在需要使用的html页面中进行关联,比方说
注意,静态文件的位置一定要确定好,一定要弄清楚相对位置和绝对位置的含义,如果位置错误则会显示找不到静态包
我在这里示例一个百度官方的echarts.js的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的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); </script> </body> </html>然后实现
我们可以尝试一个进阶图例,图例代码来源:http://gallery.echartsjs.com/editor.html?c=xH1PiorBb-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var base = +new Date(2014, 9, 3, 0); var oneDay = 600000; var date = []; var data = []; for (var i = 0; i < 144; i++) { var now = new Date(base += oneDay); date.push([now.getHours(), now.getMinutes()].join(':')); data.push(Math.floor(Math.random() * (1000 + 1 - 400) + 400)); } date.unshift(0.0); data.unshift(500); option = { color: ['#6EE4C2'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, title: { text: 'xx馆每日进出人次统计', }, dataZoom: [{ type: 'inside', start: 0, end: 100 }], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { show: true, feature: { restore: { show: true }, magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }, } }, xAxis: [{ name: '日期', type: 'category', data: date, axisTick: { alignWithLabel: true } }], yAxis: [{ name: '进出人次', type: 'value' }], series: [{ name: '图书馆每日进出人次统计', type: 'bar', barWidth: '60%', data: data }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>然后显示效果为:
这样就完成了echarts在html页面中的调用,有人肯定就会说,我要怎么在模版页面里面使用echarts?
而不是霸占整个页面? 其实就是给这个图表一个容器就可以了。
我拿我自己的软件举一个例子:
现在看到我其中的一个页面是这样的,但是echarts并不是霸占整个页面,是因为我给网页中的所有元素都设置了容器。
可以看到这个图表就是在容器内
通过上图就可以看到我相关图表的代码,这其中涉及到了前端框架Bootstrap的相关技术
我简要解释一下: 1.代码中的row的容器代表我设置了一列容器 2.col-md-12的容器代表其占比是100%
3. 最后设置该图表id是echarts1(因为我在同一个页面设置了多个echarts),其图表的长宽分别是1600px和400px
通过容器的概念,我们就可以任意的在某个地方放置我们的echarts了
肯定还会有人问,那你的echarts配置语句呢?怎么只看到容器?
我的语句统一放在html页面下方,通过容器id=echarts1与图表js语句关联。
简单总结:
1. 下载echarts.js文件,并导入项目,让项目找得到它
2. 调用echarts文件,具体调用方法见百度官方使用说明:http://echarts.baidu.com/tutorial.htmlO#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
3.给一个网页容器把echarts装进去,更加美观
4.前端都涉及Html,CSS,JS等,只要不调用数据库和后台就涉及不到Django,所以放心的按照官方来做
下一章讲如何使用Django调用数据库给前台的echarts
有地方不懂的就在评论区问,有错误请指出,大家共同进步!
因本文不太严谨,所以严禁转载!
相关文章推荐
- 【PythonDjango后台实例 第三章】Python3.6.1+Django1.8 模版的继承使用
- 【PythonDjango后台实例 第七章】Django使用Video.js视频播放插件
- 【PythonDjango后台实例 第五章】Bootstrap3 在HTML页面中显示调用本地时间并动态显示
- 【PythonDjango后台实例 第二章】Python3.6.1+Pyserial+PyMySQL 实现读取串口并存入数据库
- Python中使用HTMLParser解析html实例
- 黄聪:使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)
- asp.net使用echarts展示图表数据
- Python中使用 Selenium 实现网页截图实例
- 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies .
- 以一个投票程序的实例来讲解Python的Django框架使用
- echarts页面图表工具的使用实例
- 用Python程序抓取网页的HTML信息的一个小实例
- Python菜鸟之路:Django Admin后台管理功能使用
- Python使用urllib2模块抓取HTML页面资源的实例分享
- echarts 图表 展示 练习二 (ajax 后台加载数据)
- 使用python Django做网页
- 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)(转)
- 【python】使用HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies
- 使用python Django做网页
- 以一个投票程序的实例来讲解Python的Django框架使用