ECharts简单使用，涉及到的datetime模块

最新推荐文章于 2023-03-11 19:58:28 发布

weixin_44781936

最新推荐文章于 2023-03-11 19:58:28 发布

阅读量683

点赞数

分类专栏：随笔文章标签：随笔

本文链接：https://blog.csdn.net/weixin_44781936/article/details/100675083

版权

随笔专栏收录该内容

8 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    案例
 EChart的使用官方文档写的很详细: echart官方文档
 类似分页、富文本插件的使用方法。
 可以通过模板渲染传递必要的的参数，也可以获取异步加载到的数据
案例中涉及到的datetime模块的使用from datetime import datetime
datetime.strftime(time, 格式化输出) datetime类型 --> str
datetime.strptime(time, 格式化输出) str --> datetime类型
timedelta() 天数(datetime类型) 可以计算日期相差天数
 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新经资讯后台管理</title>
	<link rel="stylesheet" type="text/css" href="../../static/admin/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css">
	<script type="text/javascript" src="../../static/admin/js/echarts.min.js"></script>
</head>
<body>
	<div class="breadcrub">
		当前位置：用户管理>用户统计
	</div>
	<div class="spannels">
		<div class="spannel scolor01">
			<em>{{ tcount }}</em><span>人</span>
			<b>用户总数</b>
		</div>
		<div class="spannel scolor02">
			<em>{{ mcount }}</em><span>人</span>
			<b>用户月活人数</b>
		</div>
		<div class="spannel2 scolor03">
			<em>{{ dcount }}</em><span>人</span>
			<b>用户日活人数</b>
		</div>		
	</div>
	
	<div class="pannel">
		<div id="chart_show" class="chart_show"></div>
	</div>
	<script>
		var oChart = echarts.init(document.getElementById('chart_show'));
		var chartopt = {
					    title:{
					        text: '用户登录活跃数',
		                    left: 'center',
		                    top: '10'
					    },
					    tooltip:{
					        trigger: 'axis'
					    },
					    legend: {
					        data:['active'],
		                    top: '40'
					    },
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType : {show: true, type: ['line','bar']},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
				    	calculable : true,               
					    xAxis : [
					        {
		                        name: '今天',
					            type : 'category',
					            boundaryGap : false,
					            data : {{ datelist|safe }}
					        }
					    ],
					    yAxis : [
					        {
		                        name: '活跃用户数量',
					            type : 'value',
					            minInterval: 1
					        }
					    ],      
					    series : [
					        {
					            name:'active',
					            type:'line',
					            smooth:true,
					            itemStyle: {normal: {areaStyle: {type: 'default'}, color: '#f80'}, lineStyle: {color: '#f80'}},
					            data:{{ countlist|safe }}
					        }],
					    areaStyle:{
						        normal:{
						            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						                offset: 0,
						                color: 'rgba(255,136,0,0.39)'
						            }, {
						                offset: .34,
						                color: 'rgba(255,180,0,0.25)'
						            },{
						                offset: 1,
						                color: 'rgba(0,255,0,1.00)'
						            }])

						        }
						    }

            			};

            oChart.setOption(chartopt);

	</script>
</body>
</html>
 

                

weixin_44781936

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts简单使用，涉及到的datetime模块

案例from datetime import datetimedatetime.strftime(time, 格式化输出) datetime类型 --> strdatetime.strptime(time, 格式化输出) str --> datetime类型timedelta() 天数(datetime类型) 可以计算日期相差天数...
复制链接

扫一扫