From 9aa3c127aaec9f3c87c26dffa1ebeb843be006a6 Mon Sep 17 00:00:00 2001 From: JohnYan <84345999@qq.com> Date: Sun, 3 Jan 2021 16:29:17 +0800 Subject: [PATCH] support jupyter and dashboard up or load --- README.md | 3 +- static/echart/theme/macarons21912212209.js | 232 +++++++++++++++++++++ static/index/input.css | 140 +++++++++++++ templates/echart/403.html | 36 +++- templates/echart/dataset.html | 17 ++ templates/echart/updashboard.html | 58 ++++++ templates/source/no_favorite | 36 +++- 7 files changed, 501 insertions(+), 21 deletions(-) create mode 100644 static/echart/theme/macarons21912212209.js create mode 100644 static/index/input.css create mode 100644 templates/echart/dataset.html create mode 100644 templates/echart/updashboard.html diff --git a/README.md b/README.md index 4dae23a..b498718 100644 --- a/README.md +++ b/README.md @@ -206,6 +206,7 @@ pip install smartchart ```shell script 2020/12/14 静态资源本地化 v3.9.8.2 支持所有常见数据库,支持VUE,DATAV +v3.9.8.3 支持Jupyter,支持一键分享和应用dashboard模板 ``` @@ -222,4 +223,4 @@ v3.9.8.2 支持所有常见数据库,支持VUE,DATAV - 但如果要使用好smart chart, 建意了解下javascript, H5, Echarts这些前端知识, 可以让你的应用更加得心应手,创作更炫的效果 - 如果你需要更进一步订制你的数据, 你需要了解下SQL的使用,本项目高级应用语言都是通用的技能, 象js, h5,sql 学习成本低 -- [SmartChart入门文档入口, 以视屏为准](https://www.smartchart.cn/blog/article/2019/12/14/33.html "SmartChart入门") +- [SmartChart入门文档入口, 以视屏为准](https://www.smartchart.cn/blog/article/2019/6/1/3.html "SmartChart入门") diff --git a/static/echart/theme/macarons21912212209.js b/static/echart/theme/macarons21912212209.js new file mode 100644 index 0000000..a15e8cd --- /dev/null +++ b/static/echart/theme/macarons21912212209.js @@ -0,0 +1,232 @@ +(function(root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if ( + typeof exports === 'object' && + typeof exports.nodeName !== 'string' + ) { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +})(this, function(exports, echarts) { + var log = function(msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + + var colorPalette = [ + '#ed9678', + '#e7dac9', + '#cb8e85', + '#f3f39d', + '#c8e49c', + '#f16d7a', + '#f3d999', + '#d3758f', + '#dcc392', + '#2e4783', + '#82b6e9', + '#ff6347', + '#a092f1', + '#0a915d', + '#eaf889', + '#6699FF', + '#ff6666', + '#3cb371', + '#d5b158', + '#38b6b6' + ]; + + var theme = { + color: colorPalette, + + title: { + textStyle: { + fontWeight: 'normal', + color: '#cb8e85' + } + }, + + dataRange: { + color: ['#cb8e85', '#e7dac9'], //颜色 + //text:['高','低'], // 文本，默认为数值文本 + textStyle: { + color: '#333' // 值域文字颜色 + } + }, + + bar: { + barMinHeight: 0, // 最小高度改为0 + // barWidth: null, // 默认自适应 + barGap: '30%', // 柱间距离，默认为柱形宽度的30%，可设固定值 + barCategoryGap: '20%', // 类目间柱形距离，默认为类目间距的20%，可设固定值 + itemStyle: { + normal: { + // color: '各异', + barBorderColor: '#fff', // 柱条边线 + barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0 + barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1 + label: { + show: false + // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 + // 'inside'|'left'|'right'|'top'|'bottom' + // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE + } + }, + emphasis: { + // color: '各异', + barBorderColor: 'rgba(0,0,0,0)', // 柱条边线 + barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0 + barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1 + label: { + show: false + // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 + // 'inside'|'left'|'right'|'top'|'bottom' + // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE + } + } + } + }, + + line: { + itemStyle: { + normal: { + // color: 各异, + label: { + show: false + // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 + // 'inside'|'left'|'right'|'top'|'bottom' + // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE + }, + lineStyle: { + width: 2, + type: 'solid', + shadowColor: 'rgba(0,0,0,0)', //默认透明 + shadowBlur: 5, + shadowOffsetX: 3, + shadowOffsetY: 3 + } + }, + emphasis: { + // color: 各异, + label: { + show: false + // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 + // 'inside'|'left'|'right'|'top'|'bottom' + // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE + } + } + }, + //smooth : false, + //symbol: null, // 拐点图形类型 + symbolSize: 2, // 拐点图形大小 + //symbolRotate : null, // 拐点图形旋转控制 + showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略） + }, + + candlestick: { + itemStyle: { + color: '#fe9778', + color0: '#e7dac9' + }, + lineStyle: { + width: 1, + color: '#f78766', + color0: '#f1ccb8' + }, + areaStyle: { + color: '#e7dac9', + color0: '#c8e49c' + } + }, + + // 饼图默认参数 + pie: { + center: ['50%', '50%'], // 默认全局居中 + radius: [0, '75%'], + clockWise: false, // 默认逆时针 + startAngle: 90, + minAngle: 0, // 最小角度改为0 + selectedOffset: 10, // 选中是扇区偏移量 + itemStyle: { + normal: { + // color: 各异, + borderColor: '#fff', + borderWidth: 1, + label: { + show: true, + position: 'outer', + textStyle: { color: '#1b1b1b' }, + lineStyle: { color: '#1b1b1b' } + // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE + }, + labelLine: { + show: true, + length: 20, + lineStyle: { + // color: 各异, + width: 1, + type: 'solid' + } + } + } + } + }, + + map: { + itemStyle: { + color: '#ddd', + borderColor: '#fff', + borderWidth: 1 + }, + areaStyle: { + color: '#f3f39d' + }, + label: { + show: false, + color: 'rgba(139,69,19,1)' + }, + showLegendSymbol: true + }, + + graph: { + itemStyle: { + color: '#d87a80' + }, + linkStyle: { + strokeColor: '#a17e6e' + }, + nodeStyle: { + brushType: 'both', + strokeColor: '#a17e6e' + }, + label: { + show: false + } + }, + + gauge: { + axisLine: { + lineStyle: { + color: [ + [0.2, '#ed9678'], + [0.8, '#e7dac9'], + [1, '#cb8e85'] + ], + width: 8 + } + } + } + }; + + echarts.registerTheme('macarons2', theme); +}); \ No newline at end of file diff --git a/static/index/input.css b/static/index/input.css new file mode 100644 index 0000000..f292a7d --- /dev/null +++ b/static/index/input.css @@ -0,0 +1,140 @@ + *, +:before, +:after { + box-sizing: border-box; +} +body { + background: #424242; +} +form { + width: 320px; + margin: 45px auto; +} +form h1 { + font-size: 3em; + font-weight: 300; + text-align: center; + color: #2196F3; +} +form h5 { + text-align: center; + text-transform: uppercase; + color: #c6c6c6; +} +form hr.sep { + background: #2196F3; + box-shadow: none; + border: none; + height: 2px; + width: 25%; + margin: 70px auto 45px auto; +} +.group { + position: relative; + margin: 45px 0; +} +textarea { + resize: none; +} +input, +textarea { + background: none; + color: #c6c6c6; + font-size: 18px; + padding: 10px 10px 10px 5px; + display: block; + width: 320px; + border: none; + border-radius: 0; + border-bottom: 1px solid #c6c6c6; +} +input:focus, +textarea:focus { + outline: none; +} +input:focus ~ label, +input:valid ~ label, +textarea:focus ~ label, +textarea:valid ~ label { + top: -14px; + font-size: 12px; + color: #2196F3; +} +input:focus ~ .bar:before, +textarea:focus ~ .bar:before { + width: 320px; +} +input[type="password"] { + letter-spacing: 0.3em; +} +label { + color: #c6c6c6; + font-size: 16px; + font-weight: normal; + position: absolute; + pointer-events: none; + left: 5px; + top: 10px; + -webkit-transition: 300ms ease all; + transition: 300ms ease all; +} +.bar { + position: relative; + display: block; + width: 320px; +} +.bar:before { + content: ''; + height: 2px; + width: 0; + bottom: 0px; + position: absolute; + background: #2196F3; + -webkit-transition: 300ms ease all; + transition: 300ms ease all; + left: 0%; +} +.btn { + background: #fff; + color: #959595; + border: none; + padding: 10px 20px; + border-radius: 3px; + text-transform: uppercase; + text-decoration: none; + outline: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); +} +.btn:hover { + color: #8b8b8b; + box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12); +} +.btn.btn-link { + background: #2196F3; + color: #d3eafd; +} +.btn.btn-link:hover { + background: #0d8aee; + color: #deeffd; +} +.btn.btn-submit { + background: #2196F3; + color: #bce0fb; +} +.btn.btn-submit:hover { + background: #0d8aee; + color: #deeffd; +} +.btn.btn-cancel { + background: #eee; +} +.btn.btn-cancel:hover { + background: #e1e1e1; + color: #8b8b8b; +} +.btn-box { + text-align: center; + margin: 50px 0; +} \ No newline at end of file diff --git a/templates/echart/403.html b/templates/echart/403.html index 4e1dc49..66eb153 100644 --- a/templates/echart/403.html +++ b/templates/echart/403.html @@ -2,24 +2,40 @@ - 你需要激活 + + -

为方便大家交流使用问题, 所以强制要求加微信获取激活码, 请放心不需要费用

-
-
-

@smartchart.cn

-
+
+
+

SmartChart

+
为方便交流,需加微信或群获取激活码,请支持一杯咖啡
+
+
+ +
+
+
+ 激活 + 加Q群 +
@smartchart.cn
+
+
+ diff --git a/templates/echart/dataset.html b/templates/echart/dataset.html new file mode 100644 index 0000000..444e0b7 --- /dev/null +++ b/templates/echart/dataset.html @@ -0,0 +1,17 @@ +{% extends "echart/base.html" %} +{% block head %}{% endblock %} +{% block style %}{% endblock %} +{% block stylesheet %}{% endblock %} +{% block body %} + + +
+
+ {% for div in div_list %} + {{div|safe}} + {% endfor %} +
+
+ +{% endblock %} +{% block javascript %}{% endblock %} \ No newline at end of file diff --git a/templates/echart/updashboard.html b/templates/echart/updashboard.html new file mode 100644 index 0000000..2f5ad9e --- /dev/null +++ b/templates/echart/updashboard.html @@ -0,0 +1,58 @@ + + + + + SmartChartConnect + + + +
+
+

SmartChart Dashboard

+
+
+ +
+ +
+
+ + +
smartchart.cn
+
+
+ + + + + \ No newline at end of file diff --git a/templates/source/no_favorite b/templates/source/no_favorite index 4e1dc49..66eb153 100644 --- a/templates/source/no_favorite +++ b/templates/source/no_favorite @@ -2,24 +2,40 @@ - 你需要激活 + + -

为方便大家交流使用问题, 所以强制要求加微信获取激活码, 请放心不需要费用

-
-
-

@smartchart.cn

-
+
+
+

SmartChart

+
为方便交流,需加微信或群获取激活码,请支持一杯咖啡
+
+
+ +
+
+
+ 激活 + 加Q群 +
@smartchart.cn
+
+
+