mirror of
https://gitee.com/smartchart/smartchart
synced 2025-05-05 00:59:25 +08:00
v3.9.8.2
This commit is contained in:
JohnYan
parent
22e3b88649
commit
c86a15dc59
@ -1,2 +0,0 @@
|
||||
For more charts, visit https://www.smartchart.cn/echart/show/
|
||||
try to pull your charts, welcome!
|
||||
@ -1,74 +0,0 @@
|
||||
//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__);
|
||||
@ -1,70 +0,0 @@
|
||||
//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__);
|
||||
@ -1,64 +0,0 @@
|
||||
//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__);
|
||||
@ -1,47 +0,0 @@
|
||||
//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__);
|
||||
@ -1,334 +0,0 @@
|
||||
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__);
|
||||
@ -1,21 +0,0 @@
|
||||
//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__);
|
||||
@ -1,147 +0,0 @@
|
||||
// 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__);
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
//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__);
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
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;
|
||||
@ -1,41 +0,0 @@
|
||||
//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);
|
||||
});
|
||||
@ -1,78 +0,0 @@
|
||||
//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);
|
||||
@ -1 +0,0 @@
|
||||
application in c# language
|
||||
@ -1 +0,0 @@
|
||||
application in go language
|
||||
@ -1 +0,0 @@
|
||||
application in java language
|
||||
@ -1 +0,0 @@
|
||||
application in php language
|
||||
@ -1 +0,0 @@
|
||||
application in python language
|
||||
28
README-EN.md
28
README-EN.md
@ -1 +1,27 @@
|
||||
TBW
|
||||
[Wiki](https://gitee.com/smartchart/django_smartchart/wikis/pages) \|
|
||||
[Community](https://www.smartchart.cn/) \|
|
||||
[Sponsors](https://www.smartchart.cn/) \|
|
||||
[GitHub](https://github.com/JohnYan2017/Echarts-Django) \|
|
||||
[Gitee](https://gitee.com/smartchart/django_smartchart)
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.smartchart.cn"><img src="https://www.smartchart.cn/static/index/logo8.png" width="45%"></a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<strong>A platform that Connect Data to Echarts.</strong>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://www.smartchart.cn">https://www.smartchart.cn</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a target="_blank" href="https://www.python.org/downloads/release/python-390/">
|
||||
<img src="https://img.shields.io/badge/Python-3.6+-green.svg" />
|
||||
</a>
|
||||
<a href='https://gitee.com/smartchart/django_smartchart/members'><img src='https://gitee.com/smartchart/django_smartchart/badge/fork.svg?theme=dark' alt='fork'></a>
|
||||
<a href='https://gitee.com/smartchart/django_smartchart/stargazers'><img src='https://gitee.com/smartchart/django_smartchart/badge/star.svg?theme=dark' alt='star'></a>
|
||||
<a target="_blank" href='https://github.com/JohnYan2017/Echarts-Django'>
|
||||
<img src="https://img.shields.io/github/stars/JohnYan2017/Echarts-Django.svg?style=social" alt="github star"/>
|
||||
</a>
|
||||
|
||||
</p>
|
||||
35
README.md
35
README.md
@ -58,8 +58,14 @@
|
||||
2. 命令行安装:
|
||||
pip3 install smartchart
|
||||
pip3 install smartchart -U (升级)
|
||||
安装慢建意使用
|
||||
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple smartchart
|
||||
|
||||
# 初始化方法
|
||||
Window系统中以下命令的 smartchart xxx 使用 smartchart.py xxx 代替
|
||||
注意: 如果你是Windows系统且安装过pycharm, 你可能需要随意新建一个xx.py的文件,
|
||||
右键选择打开方式, 改成永久使用python来关联打开
|
||||
|
||||
# Mac or Linux 初始化方法
|
||||
3. 初始化DB, 命令行输入
|
||||
smartchart makemigrations
|
||||
smartchart migrate
|
||||
@ -69,26 +75,9 @@
|
||||
smartchart
|
||||
如果你需要远程访问,启动方式:
|
||||
smartchart runserver 0.0.0.0:8000 --insecure
|
||||
6. 访问http://127.0.0.1:8000/echart/init_db/ 进行数据初始化
|
||||
|
||||
# Window 初始化方法
|
||||
3. 初始化DB, 你需要找到你的python安装地址,不记得了参考下图方法
|
||||
如C:\Users\xxx\AppData\Local\Programs\Python\Python39
|
||||
命令行输入
|
||||
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
|
||||
6. 访问http://127.0.0.1:8000/echart/init_db/ 进行数据初始化
|
||||
```
|
||||
|
||||
**访问首页http://127.0.0.1:8000**
|
||||
**访问首页http://127.0.0.1:8000, 点击首页右上方的云图标初始化数据**
|
||||
|
||||
**开发前建意新建一个非超级管理员帐号(重要),避免改到内置的数据集和图形**
|
||||
|
||||
@ -117,17 +106,18 @@ url: 登录成功后跳转链接
|
||||
|
||||
#### 如果你是python开发者,可以在django项目中当作apps使用
|
||||
最简单的方法(推荐!!!!)
|
||||
```shell script
|
||||
请直接下载gitee/github的项目后
|
||||
pip install smartchart
|
||||
启动方式 python manage.py runserver
|
||||
帐号: admin/amdin
|
||||
|
||||
```
|
||||
|
||||
如果你动手能力强
|
||||
```shell script
|
||||
pip install smartchart
|
||||
简单配置一下, 你可以参考此demo
|
||||
资源文件你需要下载gitee/github上的(注意template的setting)
|
||||
资源文件你需要下载gitee/github上的(注意template的setting你要修改成一样)
|
||||
1. 在你的setting.py的INSTALL_APPS中加入'smart_chart.echart'
|
||||
2. MIDDLEWARE 中注释掉XFrameOptionsMiddleware
|
||||
3. setting.py中设定为中国时区, 支持中文基础平台建设!
|
||||
@ -149,9 +139,8 @@ pip install smartchart
|
||||
python manage.py createsuperuser
|
||||
8. 启动服务
|
||||
python manage.py runserver
|
||||
|
||||
9. 访问http://127.0.0.1:8000/echart/init_db/ 进行数据初始化
|
||||
```
|
||||
**访问首页http://127.0.0.1:8000, 点击首页右上方的云图标初始化数据**
|
||||
|
||||
##### 图形样列参考
|
||||
- [SmartChart图形样列](https://www.smartchart.cn/echart/show/ "图形样列")
|
||||
|
||||
@ -53,6 +53,7 @@ MIDDLEWARE = [
|
||||
|
||||
ROOT_URLCONF = 'django_smartchart.urls'
|
||||
|
||||
# 请参考此处的template设定
|
||||
TEMPLATES = [
|
||||
{
|
||||
'BACKEND': 'django.template.backends.django.DjangoTemplates',
|
||||
|
||||
@ -1,2 +1 @@
|
||||
smartchart
|
||||
requests
|
||||
smartchart
|
||||
Loading…
x
Reference in New Issue
Block a user