Echarts图表以及项目环境list.txt

cjb0721 · May 5, 2019 · 220e19b · 220e19b
1 parent 40d4c89
commit 220e19b
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 1 deletion.
diff --git a/Library/BookLibrary/urls.py b/Library/BookLibrary/urls.py
@@ -41,5 +41,7 @@
     url('^ajaxlogin/$', views.ajaxlogin, name="ajaxlogin"),
     url('^checkuser/$', views.checkuser, name="checkuser"),
     url('^verifycode/$', views.verifycode, name="verifycode"),
+
+    url('^echarts/$', views.echarts, name="echarts"),
 ]
 
diff --git a/Library/BookLibrary/views.py b/Library/BookLibrary/views.py
@@ -10,9 +10,11 @@
 
 from itsdangerous import TimedJSONWebSignatureSerializer as Serializer, SignatureExpired
 
-# Create your views here.
+from django.views.decorators.cache import cache_page
 
+# Create your views here.
 
+@cache_page(60*15)
 def index(request):
     # return HttpResponse("你好，世界！")
     messinfo = MessInfo.objects.all()
@@ -370,3 +372,7 @@ def verifycode(request):
     # 将内存中的图片数据返回给客户端，MIME类型为图片png
     return HttpResponse(f.getvalue(), 'image/png')
 
+
+def echarts(request):
+    return render(request, 'BookLibrary/echarts.html')
+
diff --git a/Library/Library/settings.py b/Library/Library/settings.py
@@ -146,6 +146,14 @@
 EMAIL_HOST_PASSWORD = 'qikuedu'
 DEFAULT_FROM_EMAIL = 'zzy0371 <[email protected]>'
 
+# 缓存
+CACHES = {
+    "default": {
+    "BACKEND": "redis_cache.cache.RedisCache",
+    "LOCATION": "localhost:6379",
+    'TIMEOUT': 60,
+    },
+}
 
 
 
diff --git a/Library/db.sqlite3 b/Library/db.sqlite3
diff --git a/Library/list.txt b/Library/list.txt
@@ -0,0 +1,20 @@
+Click==7.0
+Django==2.2
+django-haystack==2.8.1
+django-redis-cache==2.0.0
+django-redis-sessions==0.6.1
+django-tinymce==2.8.0
+Flask==1.0.2
+itsdangerous==1.1.0
+jieba==0.39
+Jinja2==2.10.1
+Markdown==3.1
+MarkupSafe==1.1.1
+mysqlclient==1.4.2.post1
+Pillow==6.0.0
+PyMySQL==0.9.3
+pytz==2019.1
+redis==3.2.1
+sqlparse==0.3.0
+Werkzeug==0.15.2
+Whoosh==2.7.4
diff --git a/Library/templates/BookLibrary/ajaxlogin.html b/Library/templates/BookLibrary/ajaxlogin.html
@@ -15,6 +15,7 @@
                     },
                     success: function (data) {
                         console.log("+++")
+                        console.log(data)
                         $('#userinfo').text(data);
                     }
                 })

diff --git a/Library/templates/BookLibrary/echarts.html b/Library/templates/BookLibrary/echarts.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>图表显示</title>
+    <style>
+        div{
+            float: left;
+        }
+    </style>
+    <script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>
+</head>
+<body>
+
+    <div id="main" style="width: 600px;height:400px;"></div>
+    <div id="main2" style="width: 600px;height:400px;"></div>
+    <div id="main3" style="width: 600px;height:400px;"></div>
+    <script type="text/javascript">
+        // 基于准备好的dom，初始化echarts实例
+        var myChart1 = echarts.init(document.getElementById('main'));
+        var myChart2 = echarts.init(document.getElementById('main2'));
+
+        // 指定图表的配置项和数据
+        var option1 = {
+            title: {
+                text: 'ECharts 入门示例'
+            },
+            tooltip: {},
+            legend: {
+                data:['销量']
+            },
+            xAxis: {
+                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+            },
+            yAxis: {},
+            series: [{
+                name: '销量',
+                type: 'bar',
+                data: [5, 20, 36, 10, 10, 20]
+            }]
+        };
+
+        // 使用刚指定的配置项和数据显示图表。
+        myChart1.setOption(option1);
+
+
+
+
+        var dataCount = 5e5;
+        var data = generateData(dataCount);
+
+        var option2 = {
+            title: {
+                text: echarts.format.addCommas(dataCount) + ' Data',
+                left: 10
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        yAxisIndex: false
+                    },
+                    saveAsImage: {
+                        pixelRatio: 2
+                    }
+                }
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            grid: {
+                bottom: 90
+            },
+            dataZoom: [{
+                type: 'inside'
+            }, {
+                type: 'slider'
+            }],
+            xAxis: {
+                data: data.categoryData,
+                silent: false,
+                splitLine: {
+                    show: false
+                },
+                splitArea: {
+                    show: false
+                }
+            },
+            yAxis: {
+                splitArea: {
+                    show: false
+                }
+            },
+            series: [{
+                type: 'bar',
+                data: data.valueData,
+                // Set `large` for large data amount
+                large: true
+            }]
+        };
+
+        function generateData(count) {
+            var baseValue = Math.random() * 1000;
+            var time = +new Date(2011, 0, 1);
+            var smallBaseValue;
+
+            function next(idx) {
+                smallBaseValue = idx % 30 === 0
+                    ? Math.random() * 700
+                    : (smallBaseValue + Math.random() * 500 - 250);
+                baseValue += Math.random() * 20 - 10;
+                return Math.max(
+                    0,
+                    Math.round(baseValue + smallBaseValue) + 3000
+                );
+            }
+
+            var categoryData = [];
+            var valueData = [];
+
+            for (var i = 0; i < count; i++) {
+                categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time));
+                valueData.push(next(i).toFixed(2));
+                time += 1000;
+            }
+
+            return {
+                categoryData: categoryData,
+                valueData: valueData
+            };
+        }
+        myChart2.setOption(option2);
+    </script>
+
+
+
+
+</body>
+</html>