diff --git a/ChartResource/readme b/ChartResource/readme index e69de29..6c6f540 100644 --- a/ChartResource/readme +++ b/ChartResource/readme @@ -0,0 +1,2 @@ +more charts, visit https://www.smartchart.cn/echart/show/ +try to push your charts, welcome! \ No newline at end of file diff --git a/ChartResource/仪表盘.js b/ChartResource/仪表盘.js new file mode 100644 index 0000000..578f688 --- /dev/null +++ b/ChartResource/仪表盘.js @@ -0,0 +1,74 @@ +//select 指标名,达成,目标 + +var dataset = __dataset__; //传入dataset + +option__name__= { + // backgroundColor: '#1b1b1b', + title: [{ + x: "center", + // y: "70%", + //bottom: 100, + text: dataset[1][0], + textStyle: { + // fontWeight: 'normal', + // fontSize: 20, + // color: "#fff" + }, + }], + series : [ + { + name:'速度', + type:'gauge', + min:0, + max:100, + // center: ['60%', '50%'], // 默认全局居中 + //splitNumber:11, + // radius: '80%', + axisLine: { // 坐标轴线 + lineStyle: { // 属性lineStyle控制线条样式 + // color: [[0.5, '#ff4500'],[0.9, '#4EE3FF'],[1, 'lime']], + // width: 5, + // shadowColor : '#fff', //默认透明 + // shadowBlur: 10 + } + }, + axisLabel: { // 坐标轴小标记 + textStyle: { // 属性lineStyle控制线条样式 + fontWeight: 'bolder', + // color: '#fff', + //shadowColor : '#fff', //默认透明 + // shadowBlur: 10 + } + }, + axisTick: { // 坐标轴小标记 + // length :15, // 属性length控制线长 + lineStyle: { // 属性lineStyle控制线条样式 + color: 'auto', + // width:3, + //shadowColor : '#fff', //默认透明 + shadowBlur: 10 + } + }, + splitLine:{//橙色分割线 + length:25, + lineStyle:{ + width:3, + // color:'#FCD209', + } + }, + itemStyle:{//指针颜色 + // color:'#1e90ff', + }, + pointer:{//指针长短 + // length:110 + }, + detail: { + formatter:dataset[1][1]+'\n{value}%', + }, + data:[{value: (dataset[1][1]/dataset[1][2]*100).toFixed(0)}] + } + ] +}; + + +charts.push(myChart__name__); \ No newline at end of file diff --git a/ChartResource/分省地图.js b/ChartResource/分省地图.js new file mode 100644 index 0000000..cd90d22 --- /dev/null +++ b/ChartResource/分省地图.js @@ -0,0 +1,70 @@ +//select cityname as title, value + +//设置值范围 +let minvalue=0; +let maxvalue=6000; + +let dataset = __dataset__; //传入dataset + +let title = dataset[0][0]; +let series=[]; +for (let i=1;i0){ +series.push({name:'河北',value:houbei}) +} + + +option__name__ = { +//backgroundColor: '#6a7db5', + title: { + //text: '全国地图', + //subtext: '纯属虚构', + //x:'center' + }, + tooltip : { + trigger: 'item' + }, + dataRange: { + min : minvalue, + max : maxvalue, + calculable : true, + //orient : horizontal, + // color: ['#ff3333', 'orange', 'yellow','lime','aqua'], + textStyle:{ + // color:'#fff' + } }, + + series: [ + { + name: title, + type: 'map', + mapType: 'china', + roam: false, + label: { + normal: { + show: true + }, + emphasis: { + show: false + } + }, + data:series + } + ] + }; +charts.push(myChart__name__); \ No newline at end of file diff --git a/ChartResource/双轴柱形图.js b/ChartResource/双轴柱形图.js new file mode 100644 index 0000000..8cdf022 --- /dev/null +++ b/ChartResource/双轴柱形图.js @@ -0,0 +1,64 @@ +//select 维度,指标1, 指标2, 指标3 + +let dataset = __dataset__; //传入dataset +dataset = ds_transform(dataset) //可选, 当需要行列互转时 +let legend_label = ds_rowname(dataset) //可选, 自动获取legend +let xlabel = dataset[0].splice(1) //x轴的标签列 +dataset = ds_createMap(dataset) //转化成KV格式 + +option__name__ = { + title: { + text: '', + left: 'center' + }, //定义标题的显示 + tooltip: { + trigger: 'item', + formatter: '{a}
{b} : {c}' //鼠标移动提示的格式 + }, + legend: { + left: 'center', + data: legend_label + }, //定义图例的显示 + xAxis: { + type: 'category', + data: xlabel + }, //定义X轴的显示 + yAxis: [{ + type: 'value', + name:'AAA', + position:'left', + axisLabel:{ + formatter:function (value, index) { + return value/10000 + '万'; +}} + },{ + type: 'value', + name:'差异', + position : 'right', + + }], + //图例定义 + series: [{ + name: legend_label[0], + data: dataset[legend_label[0]], + type: 'bar' + }, + { + name: legend_label[1], + data: dataset[legend_label[1]], + type: 'bar' + },{ + name: legend_label[2], + data: dataset[legend_label[2]], + type: 'line', + yAxisIndex:1, + label:{ + show:true, + formatter:function(param) { + if (param.value==0) {return '';} else + {return param.value;} + } + }} +] +}; +charts.push(myChart__name__); \ No newline at end of file diff --git a/ChartResource/堆叠条形图.js b/ChartResource/堆叠条形图.js new file mode 100644 index 0000000..37020e4 --- /dev/null +++ b/ChartResource/堆叠条形图.js @@ -0,0 +1,47 @@ +//select 维度,维度,值 +let dataset = __dataset__; +let s = { + type: 'bar', + stack: '总量', + label: { + normal: { + show: true, + position: 'insideRight', +formatter: function (params) { + if (params.value[params.seriesIndex+1] > 0) { + return params.value[params.seriesIndex+1]; + } else { + return ''; + } + }, + } + }, + }; +let series =[]; +for (let i=1;i{b} : {c}', + //formatter: function(param) { console.log(param);return param[0].value}, + //formatter: '{b}
{a0}: {c0}
{a1}: {c1}
{a2}: {c2}%', + //折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无） + //散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无） + //地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无） + //饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） + + //坐标轴指示器，坐标轴触发有效 + axisPointer: { + type: "shadow",// 默认为直线，可选为：'line' | 'shadow' + label: { + show: true, + } + }, +}, +//图例，每个图表最多仅有一个图例 +legend: { + show: true, + //水平安放位置，默认为全图居中，可选为：center|left|right|{number}（x坐标，单位px） + x: "center", + //垂直安放位置，默认为全图顶端，可选为top|bottom|center|{number}（y坐标，单位px） + y: "top", + //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应 + data: ['销量', '人员'], + //字体格式 + textStyle: { + align: 'center', + color: '#fff', + fontSize: 20, + }, + //图标样式'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' + icon: "diamond", + //选择模式,默认开启图例选择,false 关闭,设成 'single' 或者 'multiple'使用单选或者多选模式 + selectedMode:true, + //选中状态 + selected: { + // 选中'系列1' + '销量': true, + // 不选中'系列2' + '人员': false + }, +}, + +//x轴,横坐标 +xAxis: { + //x轴的标签 + data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], + //显示策略，可选为：true（显示） | false（隐藏），默认值为true + show: true, + type: 'category',//坐标轴类型，横轴默认为类目型’category’ + + //x轴的标签格式 + axisLabel: { + show: true, + textStyle: { + color: "#ebf8ac", //X轴文字颜色 + }, + //formatter: function(name) { return name;}, + }, + //x轴的轴线格式 + axisLine: { + show: true, //是否隐藏X轴轴线 + lineStyle: { + color: '#01FCE3', + } + }, + //x轴的刻度格式 + axisTick: { + show: true, //是否隐藏X轴刻度 + }, +}, + +//纵坐标 + +yAxis: { + show: true, + //坐标轴类型，纵轴默认为数值型’value’ + type: 'value', + //分隔区域，默认不显示 + splitArea: { show: true, }, + //分隔线 + splitLine: { show: true, }, + //指定刻度范围 + min: 0, + max: 50, + interval:10, + splitNumber: 8, //坐标轴的分割段数预估 + //标签轴线等与x轴的方法一致 + +}, +/* //多坐标的写法 + +yAxis:[{ + type: 'value', + name:'AAA', + position:'left', + axisLabel:{ + //坐标文字 + textStyle: { + color: function (value, index) { + return value >= 90 ? 'green' : 'red'; + } + }, + formatter:function (value, index) { + return value/10000 + '万'; + }, + } + }, + { + type: 'value', + name:'差异', + position : 'right', + }, + + ], + +*/ + +//系列 +series: [ + { + name: '销量', + type: 'bar', + //barWidth: 15,//宽度 + barGap:'30%', //间距 + data: [5, 20, 36, 10, 10, 20], + label: { + show: true, //是否显示数值 + //position: [10, 10], //位置绝对的像素值 + position: ['50%', '50%'], //相对的百分比,'top','bottom','inside' + rotate:-36, //角度 + formatter: '{b}:{c}' //自定义数据 + + }, + //显示样式 + itemStyle: { + color: "#058cff", + //渐变色设定 + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: "#00FFE3" + }, + { + offset: 1, + color: "#4693EC" + } + ]) + }, + + }, + + //系列外框线格式 + lineStyle: { + color: "#058cff" + }, + //系列填充格式 + areaStyle:{ + color: "rgba(5,140,255, 0.2)" + }, + + //折线设定,所有标记样式如下 + //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' + smooth: true, //平滑曲线显示 + showAllSymbol: true, //显示所有图形。 + symbol: "circle", //标记的图形为实心圆 + symbolSize: 10, //标记的大小 + + //标记点 + markPoint : { + data : [ + {type : 'max', name: '最大值'}, + {type : 'min', name: '最小值'}, + {name: '坐标',coord: [10, 20]}, + {name: '屏幕坐标',x:100,y:200}, + ], + //标记 + symbol:'pin', + symbolSize:50, + symbolRotate:-30, + //通用格式如上的label + label:{ + show:true, + }, + }, + + //标记线 + markLine : { + data : [ + {type : 'average', name: '平均值'}, + {name : '1000', yAxis : 24}, + ] + }, + + }, + /* //高级series设定的方法 + { + name: legend_label[2], + data: dataset[legend_label[2]], + type: 'line', + yAxisIndex:1, //所在坐标轴,0为默认 + label:{ + show:true, + formatter:function(param) { + if (param.value===0) {return '';} else + {return param.value;} + } + } + }, + + */ + + + +], + + + +//直角坐标系内绘图网格 + grid: { + left: '3%', + right: '4%', + bottom: '10%', + top: '15%', + containLabel: true //false防止标签溢出容器 + }, + +/* +//视觉映射组件 +visualMap: { + min: 0, + max: 100, + // 两个手柄对应的数值是 4 和 15 + range: [4, 100], + calculable:true, //是否显示手柄 + itemWidth:20, + itemHeight:140, + text:['最大值','最小值'], + //dimension:1, //指定用数据哪个维度，映射到视觉元素上 + seriesIndex:0, //指用那个系列 + hoverLink:true, //鼠标位置对应的数值图表中对应的图形元素高亮 + // 表示目标系列的视觉样式 和 visualMap-continuous 共有的视觉样式。 + inRange: { + color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], + symbolSize: [4, 100] + }, + // 表示 visualMap-continuous本身的视觉样式，会覆盖共有的视觉样式。 + // 比如，symbolSize 覆盖成为 [30, 100]，而 color 不变。 + controller: { + inRange: { + symbolSize: [30, 100] + } + } + +}, + +*/ + + +//工具栏 +toolbox: { + //显示策略，可选为：true（显示） | false（隐藏），默认值为false + show: true, + //工具箱自定义功能回调处理 + feature: { + //辅助线标志 + mark: { show: true }, + //dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退 + dataZoom: { + show: true, + title: { + dataZoom: "区域缩放", + dataZoomReset: "区域缩放后退" + } + }, + //数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能 + dataView: { show: true, readOnly: true }, + //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换 + magicType: { show: true, type: ["line", "bar"] }, + //restore，还原，复位原始图表 + restore: { show: true }, + //saveAsImage，保存图片（IE8-不支持）,图片类型默认为’png’ + saveAsImage: { show: true } + } +}, +}; + +charts.push(myChart__name__); \ No newline at end of file diff --git a/ChartResource/柱形图.js b/ChartResource/柱形图.js new file mode 100644 index 0000000..a8e82ba --- /dev/null +++ b/ChartResource/柱形图.js @@ -0,0 +1,21 @@ +//select 维度,维度,值 + +var series =[]; +var dataset = __dataset__; +for (var i=1;i 1) { + for (var i = 0; i < hang; i++) { + var start = i * max; + var end = start + max; + var temp = value.substring(start, end) + "\n"; + last += temp; //凭借最终的字符串 + } + return last; + } else { + return value; + } + } + }, + data: ["维度"] + }, + tooltip: { + trigger: "axis", + formatter: function(params) { + var res = ""; + var name = ""; + var start0 = ""; + var start = ""; + var end0 = ""; + var end = ""; + for (var i in params) { + var k = i % 2; + if (!k) { //偶数 + start0 = params[i].data; + console.log(start0); + // start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate(); + start = start0.getHours() + ":" + start0.getMinutes() + ":" + start0.getSeconds(); + } + if (k) { //奇数 + name = params[i].seriesName; + end0 = params[i].data; + //end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate(); + end = end0.getHours() + ":" + end0.getMinutes() + ":" + end0.getSeconds(); + res += name + " : " + end + "~" + start + "
"; + + } + } + return res; + } + }, + series: series +} +charts.push(myChart__name__); + diff --git a/ChartResource/线性图.js b/ChartResource/线性图.js new file mode 100644 index 0000000..2cd7f96 --- /dev/null +++ b/ChartResource/线性图.js @@ -0,0 +1,22 @@ +//select 维度,维度,值 + +var series =[]; +var dataset = __dataset__; +for (var i=1;i,"error","warning","info" +//头部, 不需要可以去掉 +table += ""; +for(var j=0; j" + data[0][j] + ""; +}; +table += ""; + +//表主体, 如果有头部, 把0改为1 +table += ""; + for(var i=1;i" + data[i][j] + ""; + }; + table += ""; + }; + table += ""; + +dom__name__.innerHTML=table; \ No newline at end of file diff --git a/ChartResource/透视表.js b/ChartResource/透视表.js new file mode 100644 index 0000000..f5e7b83 --- /dev/null +++ b/ChartResource/透视表.js @@ -0,0 +1,41 @@ +//select 维度A,维度B,.....,数值 +let dataset=__dataset__; +//dataset = [['color','shape','qty','SS'],['blue','circle',1,2],['red','triangle',2,3]] + +let rows = ['城市'] +let cols = [''] +let derivers = $.pivotUtilities.derivers; +let sum = $.pivotUtilities.aggregatorTemplates.sum;// 获取sum操作函数 +let numberFormat = $.pivotUtilities.numberFormat;// 获取数字格式化类 +let renderers = $.extend($.pivotUtilities.renderers, + $.pivotUtilities.plotly_renderers, + $.pivotUtilities.export_renderers); +let intFormat = numberFormat({digitsAfterDecimal: 2}); // 对输入的数据进行格式转换 +let pivotOption = { + renderers:renderers, + rows: rows, + cols: cols, + vals:['销售价'], + aggregator: sum(intFormat)(["销售价"]),// 使用聚合函数指定聚合列名, + rendererOptions:{table:{rowTotals: true,colTotals:false}}// 指定行列是否聚合汇总 + }; +pivotOption.showUI=true; + + +$(function() { +//pivot隐藏拖拽,pivotUI显示 +$(dom__name__).pivotUI(dataset, pivotOption,true); + }); + +//需要切换功能时,在你的DIV中加一个id=pivotbutton的元素 +$('#pivotbutton').click(function(){ + let pivotOption = $(dom__name__).data("pivotUIOptions"); + pivotOption.showUI = ! pivotOption.showUI; + $(dom__name__).pivotUI(dataset, pivotOption,true); +}) + +//需要下载功能时,加一个id=tbdownbutton的元素,container改成对应的编号 +$('#tbdownbutton').click(function(){ + let defaultOptions = "file"+ new Date().getTime(); + new Table2Excel().export($('#container___name__ > table > tbody > tr:nth-child(3) > td.pvtRendererArea > table'),defaultOptions); + }); \ No newline at end of file diff --git a/ChartResource/饼图.js b/ChartResource/饼图.js new file mode 100644 index 0000000..4bd8d8c --- /dev/null +++ b/ChartResource/饼图.js @@ -0,0 +1,78 @@ +//select 指标名, 值 + +var dataset = __dataset__; //传入dataset +legend_label = ds_rowname(dataset) //可选, 自动获取legend +var series =[]; +for (var i=1;i{c} ({d}%)" + }, + + visualMap: { + show: false, + min: 80, + max: 600, + inRange: { + // colorLightness: [0, 1] + } + }, + series : [ + { + name:dataset[0][1], + type:'pie', + radius : '55%', + center: ['50%', '50%'], + roseType: 'radius', + label: { + normal: { + textStyle: { + // color: 'rgba(255, 255, 255, 0.3)' + } + } + }, + labelLine: { + normal: { + lineStyle: { + // color: 'rgba(255, 255, 255, 0.3)' + }, + smooth: 0.2, + length: 10, + length2: 20 + } + }, + itemStyle: { + normal: { + // color: '#8B2500', + // shadowBlur: 200, + // shadowColor: 'rgba(0, 0, 0, 0.5)' + } + }, + + animationType: 'scale', + animationEasing: 'elasticOut', + animationDelay: function (idx) { + return Math.random() * 200; + }, + data: series + } + ] +}; +charts.push(myChart__name__); + +//动态播放 +startSelectAnimate(myChart__name__,legend_label.length,1000,1); \ No newline at end of file diff --git a/JavaInterface/readme b/JavaInterface/readme index e69de29..ea65774 100644 --- a/JavaInterface/readme +++ b/JavaInterface/readme @@ -0,0 +1 @@ +waiting for your input \ No newline at end of file diff --git a/README.md b/README.md index 2fa782a..c14ca75 100644 --- a/README.md +++ b/README.md @@ -15,34 +15,59 @@ ![](http://smartchart.cn/media/editor/WX20201128-075135@2x_20201128075202927382.png) #### 安装使用说明: +- [Window平台安装视屏介绍](https://www.ixigua.com/6901867671193649668/ "Window平台安装视屏介绍") + ##### 如果你是非Python语言的开发者 -```shell +```python 你可以把smartchart当作服务来嵌入你的页面使用 1. 安装Python环境,请安装最新版3.9!! -2. 命令行安装: pip install smartchart -3. 初始化DB, 命令行输入(仅适用于MAC or Linux): +2. 命令行安装: pip3 install smartchart + +# Mac or Linux 初始化方法 +3. 初始化DB, 命令行输入 smartchart makemigrations smartchart migrate 4. 建立管理员帐号, 如果已有可忽略 - smartchart createsuperuser -5. 本地命令行启动: smartchart - 如果你需要远程访问 - 启动方式: smartchart runserver 0.0.0.0:8000 --insecure -6. 访问http://127.0.0.1:8000/echart/init_db/ 进行数据初始化 -7. 如果需要你可以采用单点登录的方式与smartchart进行对接 - /echart/smart_login?id=xxx&stamp=xxx&token=xxx&url=/ - id: 用户名 - stamp: 时间戳(1970年1月1日到生成时间的毫秒数) - token: 采用sha1加密, token=SHA1(链接秘钥+stamp+id) - 链接秘钥默认是smartchart,你可以在你的环境变量中设定SMART_KEY进行替换 - url: 登录成功后跳转链接 - -Note: 如果你是windows用户, 无法直接使用smartchart命令, 你需要找到你的python安装地址, + smartchart createsuperuser +5. 本地命令行启动: + smartchart + 如果你需要远程访问，启动方式: + smartchart runserver 0.0.0.0:8000 --insecure + +# Window 初始化方法 +3. 初始化DB, 你需要找到你的python安装地址,不记得了参考下图方法 如C:\Users\xxx\AppData\Local\Programs\Python\Python39 - 将命令替换成 python C:\Users\xxx\AppData\Local\Programs\Python\Python39\Scripts\smartchart xxxxx + 命令行输入 + cd C:\Users\....\Python39\Scripts\ + python smartchart makemigrations + python smartchart migrate +4. 建立管理员帐号, 如果已有可忽略 + python smartchart createsuperuser +5. 本地命令行启动: + python smartchart + 如果你需要远程访问 + 启动方式: + python smartchart runserver 0.0.0.0:8000 --insecure + ``` +**访问http://127.0.0.1:8000/echart/init_db/ 进行数据初始化 +** +**访问首页http://127.0.0.1:8000** + +```python +如果需要，你可以采用单点登录的方式与smartchart进行对接 +/echart/smart_login?id=xxx&stamp=xxx&token=xxx&url=/ +参数说明： +id: 用户名（在smartchart平台中管理） +stamp: 时间戳(1970年1月1日到生成时间的毫秒数) +token: 采用sha1加密, token=SHA1(链接秘钥+stamp+id) + 链接秘钥默认smartchart, + 请在环境变量设定SMART_KEY替换（重要） +url: 登录成功后跳转链接 +``` +**提示：为了数据安全,对外生产环境使用,务必设定你的环境变量SMART_KEY +** -访问首页url: http://127.0.0.1:8000 ##### 如果你是python开发者,可以在你的django项目中当作apps使用 ```python @@ -51,7 +76,7 @@ pip install smartchart==3.6.2 #只支持python3.6.x 简单配置一下, 你可以参考此demo 1. 在你的setting.py的INSTALL_APPS中加入'smart_chart.echart' 2. MIDDLEWARE 中注释掉XFrameOptionsMiddleware -3. 将你的设定为中国时区, 支持中文基础平台建设! +3. setting.py中设定为中国时区, 支持中文基础平台建设! LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' USE_I18N = True @@ -60,9 +85,9 @@ pip install smartchart==3.6.2 #只支持python3.6.x 4. 在你的url.py中加入引用 from django.conf.urls import include from django.views.generic import RedirectView -5. urlpatterns中加入路由 +5. url.py的urlpatterns中加入路由 path('echart/', include('smart_chart.echart.urls')), - path('', RedirectView.as_view(url='echart/index/')), #smartchart报表管理页, 自行更改路由 + path('', RedirectView.as_view(url='echart/index/')), #首页,可自定义路由 6. 初始化DB, 命令行输入: python manage.py makemigrations python manage.py migrate @@ -70,11 +95,9 @@ pip install smartchart==3.6.2 #只支持python3.6.x python manage.py createsuperuser 8. 启动服务 python manage.py runserver -9. 访问http://127.0.0.1:8000/echart/init_db/ 进行数据初始化 - -你就可以愉快的使用smartchart了 - ``` +访问http://127.0.0.1:8000/echart/init_db/ 进行数据初始化 + ##### 图形样列参考 - [SmartChart图形样列](https://www.smartchart.cn/echart/show/ "图形样列") - [SmartChart仪表盘样列](https://www.smartchart.cn/index/ "项目样列")