mirror of
https://gitee.com/smartchart/smartchart
synced 2025-05-05 09:09:24 +08:00
add charts
This commit is contained in:
JohnYan
parent
a0f347386e
commit
38271dcff5
@ -0,0 +1,2 @@
|
||||
more charts, visit https://www.smartchart.cn/echart/show/
|
||||
try to push your charts, welcome!
|
||||
74
ChartResource/仪表盘.js
Normal file
74
ChartResource/仪表盘.js
Normal file
@ -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__);
|
||||
70
ChartResource/分省地图.js
Normal file
70
ChartResource/分省地图.js
Normal file
@ -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;i<dataset.length;i++){
|
||||
series.push({name:dataset[i][0],value:dataset[i][1]})
|
||||
}
|
||||
let houbei = 0;
|
||||
for (i=1;i<dataset.length;i++){
|
||||
if(dataset[i][0]=='甘青宁'){
|
||||
series.push({name:'甘肃',value:dataset[i][1]/3});
|
||||
series.push({name:'青海',value:dataset[i][1]/3});
|
||||
series.push({name:'宁夏',value:dataset[i][1]/3});
|
||||
}
|
||||
else if(dataset[i][0]=='冀南' || dataset[i][0]=='冀北' ){
|
||||
houbei = houbei + dataset[i][1]
|
||||
}else{
|
||||
series.push({name:dataset[i][0],value:dataset[i][1]})
|
||||
}
|
||||
}
|
||||
if(houbei>0){
|
||||
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__);
|
||||
64
ChartResource/双轴柱形图.js
Normal file
64
ChartResource/双轴柱形图.js
Normal file
@ -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} <br/>{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__);
|
||||
47
ChartResource/堆叠条形图.js
Normal file
47
ChartResource/堆叠条形图.js
Normal file
@ -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<dataset[0].length;i++){
|
||||
series.push(s)
|
||||
}
|
||||
option__name__={ dataset:{source:dataset },
|
||||
title:{text:dataset[0][0]},
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
||||
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category'
|
||||
},
|
||||
series: series
|
||||
};charts.push(myChart__name__);
|
||||
334
ChartResource/常用option.js
Normal file
334
ChartResource/常用option.js
Normal file
@ -0,0 +1,334 @@
|
||||
var dataset = __dataset__; //传入dataset
|
||||
//print(dataset) //打印数据
|
||||
var title = dataset[0][0]; //标题一般取第一个字段的名称
|
||||
dataset = ds_transform(dataset); //可选, 当需要行列互转时
|
||||
legend_label = ds_rowname(dataset); //可选, 自动获取legend
|
||||
xlabel = dataset[0].slice(1); //x轴的标签列
|
||||
dataset = ds_createMap(dataset); //转化成KV格式
|
||||
|
||||
//自动series,处理字典
|
||||
var series =[];
|
||||
for (var i=0;i<legend_label.length;i++){
|
||||
series.push({type:'bar',data:dataset[legend_label[i]]});
|
||||
}
|
||||
|
||||
/*
|
||||
//自动series,处理数组
|
||||
var series =[];
|
||||
for (var i=1;i<dataset[0].length;i++){
|
||||
series.push({type: 'line'})
|
||||
}
|
||||
*/
|
||||
|
||||
var option__name__ = {
|
||||
//指定背景颜色
|
||||
backgroundColor: '#3bd482',
|
||||
//指定图列的顺序颜色
|
||||
color : ['#b3c7bc','#cdd6bc','#d4713b'],
|
||||
//标题，每个图表最多仅有一个标题控件
|
||||
title: {
|
||||
text: "更多配置说明",//图的标题
|
||||
link: "https://www.echartsjs.com/zh/option.html",//主标题文本超链接
|
||||
subtext: "", //副标题文本，
|
||||
sublink: "",//副标题文本超链接
|
||||
x: "", //水平坐标，默认为左侧center|left|right| {number}（px)
|
||||
y: "", //top|bottom|center|{number}（y坐标，单位px）
|
||||
//字体格式
|
||||
textStyle: {
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {//提示框，鼠标悬浮交互时的信息提示
|
||||
trigger: "axis",//触发类型，默认（item）数据触发，可选为：item|axis
|
||||
formatter: '{a} <br/>{b} : {c}',
|
||||
//formatter: function(param) { console.log(param);return param[0].value},
|
||||
//formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{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__);
|
||||
21
ChartResource/柱形图.js
Normal file
21
ChartResource/柱形图.js
Normal file
@ -0,0 +1,21 @@
|
||||
//select 维度,维度,值
|
||||
|
||||
var series =[];
|
||||
var dataset = __dataset__;
|
||||
for (var i=1;i<dataset[0].length;i++){
|
||||
series.push({type: 'bar'})
|
||||
}
|
||||
|
||||
option__name__= {
|
||||
legend: {},
|
||||
tooltip: {},
|
||||
dataset:{source:dataset },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: series
|
||||
};
|
||||
charts.push(myChart__name__);
|
||||
147
ChartResource/甘特图.js
Normal file
147
ChartResource/甘特图.js
Normal file
@ -0,0 +1,147 @@
|
||||
// select 项目名, 开始时间, 结束时间
|
||||
var dataset = __dataset__; //传入dataset
|
||||
//dataset=[['category','C1','C2'],['L1','2020-01-01T10:00:00','2020-02-01 11:00'],['L2','2020-02-01','2020-03-01'],['L3','2020-03-01','2020-04-01']];
|
||||
//dataset = ds_transform(dataset) //可选, 当需要行列互转时
|
||||
//legend_label = ['C1','C2'] //legend_label的顺序可以指定, 已知系列名
|
||||
legend_label = ds_rowname(dataset) //可选, 自动获取legend
|
||||
xlabel = dataset[0].slice(1) //x轴的标签列
|
||||
dataset = ds_createMap(dataset) //转化成KV格式
|
||||
|
||||
//自动series
|
||||
var series =[];
|
||||
for (var i=0;i<legend_label.length;i++){
|
||||
series.push(
|
||||
{
|
||||
name: legend_label[i],
|
||||
type: "bar",
|
||||
stack: legend_label[i],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#000",
|
||||
position: "right",
|
||||
formatter: function(params) {
|
||||
return params.seriesName
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "skyblue",
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
zlevel: -1,
|
||||
data: [new Date(dataset[legend_label[i]][1])]
|
||||
},
|
||||
{
|
||||
name: legend_label[i],
|
||||
type: "bar",
|
||||
stack: legend_label[i],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "white",
|
||||
}
|
||||
},
|
||||
zlevel: -1,
|
||||
z: 3,
|
||||
data:[new Date(dataset[legend_label[i]][0])]
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
var option__name__= {
|
||||
backgroundColor: "#fff",
|
||||
title: {
|
||||
text: "甘特图",
|
||||
padding: 20,
|
||||
textStyle: {
|
||||
fontSize: 17,
|
||||
fontWeight: "bolder",
|
||||
color: "#333"
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 13,
|
||||
fontWeight: "bolder"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:legend_label,
|
||||
align: "right",
|
||||
right: 80,
|
||||
top: 50
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
show: false,
|
||||
right: 130,
|
||||
left: 40,
|
||||
bottom: 40,
|
||||
top: 90
|
||||
},
|
||||
xAxis: {
|
||||
type: "time",
|
||||
axisLabel: {
|
||||
"show": true,
|
||||
"interval": 0
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
formatter: function(value, index) {
|
||||
var last = ""
|
||||
var max = 5;
|
||||
var len = value.length;
|
||||
var hang = Math.ceil(len / max);
|
||||
if (hang > 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 + "</br>";
|
||||
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
},
|
||||
series: series
|
||||
}
|
||||
charts.push(myChart__name__);
|
||||
|
||||
22
ChartResource/线性图.js
Normal file
22
ChartResource/线性图.js
Normal file
@ -0,0 +1,22 @@
|
||||
//select 维度,维度,值
|
||||
|
||||
var series =[];
|
||||
var dataset = __dataset__;
|
||||
for (var i=1;i<dataset[0].length;i++){
|
||||
series.push({type: 'line'})
|
||||
}
|
||||
|
||||
option__name__= {
|
||||
legend: {},
|
||||
tooltip: {},
|
||||
dataset:{source:dataset },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: series
|
||||
};
|
||||
charts.push(myChart__name__);
|
||||
|
||||
26
ChartResource/表格.js
Normal file
26
ChartResource/表格.js
Normal file
@ -0,0 +1,26 @@
|
||||
var data=__dataset__;
|
||||
var table = '<table class="table">';//如果不要换行用table-responsive
|
||||
var option__name__ ='';
|
||||
|
||||
//<tr class="success">,"error","warning","info"
|
||||
//头部, 不需要可以去掉
|
||||
table += "<thead><tr>";
|
||||
for(var j=0; j<data[0].length;j++){
|
||||
table = table + "<td>" + data[0][j] + "</td>";
|
||||
};
|
||||
table += "</thead></tr>";
|
||||
|
||||
//表主体, 如果有头部, 把0改为1
|
||||
table += "<tbody>";
|
||||
for(var i=1;i<data.length;i++){
|
||||
if(i%2==0){
|
||||
table += "<tr>";}
|
||||
else{table += "<tr class='info'>"};
|
||||
for (var j=0; j<data[i].length;j++){
|
||||
table = table + "<td>" + data[i][j] + "</td>";
|
||||
};
|
||||
table += "</tr>";
|
||||
};
|
||||
table += "</tbody></table>";
|
||||
|
||||
dom__name__.innerHTML=table;
|
||||
41
ChartResource/透视表.js
Normal file
41
ChartResource/透视表.js
Normal file
@ -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);
|
||||
});
|
||||
78
ChartResource/饼图.js
Normal file
78
ChartResource/饼图.js
Normal file
@ -0,0 +1,78 @@
|
||||
//select 指标名, 值
|
||||
|
||||
var dataset = __dataset__; //传入dataset
|
||||
legend_label = ds_rowname(dataset) //可选, 自动获取legend
|
||||
var series =[];
|
||||
for (var i=1;i<dataset.length;i++){
|
||||
series.push({name: dataset[i][0],value: dataset[i][1]})
|
||||
}
|
||||
|
||||
option__name__ = {
|
||||
// backgroundColor: '#2c343c',
|
||||
|
||||
title: {
|
||||
text: dataset[0][1],
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
// color: '#ccc'
|
||||
}
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: "{b} <br/>{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);
|
||||
@ -0,0 +1 @@
|
||||
waiting for your input
|
||||
75
README.md
75
README.md
@ -15,34 +15,59 @@
|
||||
|
||||
|
||||
#### 安装使用说明:
|
||||
- [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: <a href='http://127.0.0.1:8000'>http://127.0.0.1:8000 </a>
|
||||
|
||||
##### 如果你是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/ "项目样列")
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user