758 lines
19 KiB
JavaScript
758 lines
19 KiB
JavaScript
$(window).load(function(){$(".loading").fadeOut()})
|
|
$(function () {
|
|
echarts_1();
|
|
echarts_2();
|
|
echarts_3();
|
|
echarts_4();
|
|
echarts_5();
|
|
zb1();
|
|
zb2();
|
|
zb3();
|
|
zb4();
|
|
function echarts_1() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart1'));
|
|
option = {
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
right:10,
|
|
top:30,
|
|
height:140,
|
|
itemWidth:10,
|
|
itemHeight:10,
|
|
itemGap:10,
|
|
textStyle:{
|
|
color: 'rgba(255,255,255,.6)',
|
|
fontSize:12
|
|
},
|
|
orient:'vertical',
|
|
data:['图例1','图例2','图例3','图例4']
|
|
},
|
|
calculable : true,
|
|
series : [
|
|
{
|
|
name:' ',
|
|
color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9','#c96262'],
|
|
type:'pie',
|
|
radius : [30, 70],
|
|
center : ['35%', '50%'],
|
|
roseType : 'radius',
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
lableLine: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
data:[
|
|
{value:10, name:'图例1'},
|
|
{value:15, name:'图例2'},
|
|
{value:25, name:'图例3'},
|
|
{value:30, name:'图例4'}
|
|
]
|
|
},
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function echarts_2() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart2'));
|
|
|
|
option = {
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
right:10,
|
|
top:30,
|
|
height:140,
|
|
itemWidth:10,
|
|
itemHeight:10,
|
|
itemGap:10,
|
|
textStyle:{
|
|
color: 'rgba(255,255,255,.6)',
|
|
fontSize:12
|
|
},
|
|
orient:'vertical',
|
|
data:['图例1','图例2','图例3','图例4']
|
|
},
|
|
calculable : true,
|
|
series : [
|
|
{
|
|
name:' ',
|
|
color: ['#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9','#c96262'],
|
|
type:'pie',
|
|
radius : [30, 70],
|
|
center : ['35%', '50%'],
|
|
roseType : 'radius',
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
lableLine: {
|
|
normal: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
data:[
|
|
{value:50, name:'图例1'},
|
|
{value:45, name:'图例2'},
|
|
{value:35, name:'图例3'},
|
|
{value:30, name:'图例4'}
|
|
]
|
|
},
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function echarts_3() {
|
|
/* */
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart3'));
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#dddc6b'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '10',
|
|
top: '20',
|
|
right: '30',
|
|
bottom: '10',
|
|
containLabel: true
|
|
},
|
|
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "rgba(255,255,255,.6)",
|
|
fontSize:16,
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.1)'
|
|
}
|
|
|
|
},
|
|
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
|
}, {
|
|
|
|
axisPointer: {show: false},
|
|
axisLine: { show: false},
|
|
position: 'bottom',
|
|
offset: 20,
|
|
|
|
|
|
|
|
}],
|
|
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisTick: {show: false},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.1)'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "rgba(255,255,255,.6)",
|
|
fontSize:16,
|
|
},
|
|
},
|
|
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.1)'
|
|
}
|
|
}
|
|
}],
|
|
series: [
|
|
{
|
|
name: '结算率',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
showSymbol: false,
|
|
lineStyle: {
|
|
|
|
normal: {
|
|
color: '#dddc6b',
|
|
width: 4
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(221, 220, 107, 0.4)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(221, 220, 107, 0.1)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#dddc6b',
|
|
borderColor: 'rgba(221, 220, 107, .1)',
|
|
borderWidth: 12
|
|
}
|
|
},
|
|
data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
|
|
|
|
},
|
|
|
|
]
|
|
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function echarts_4() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart4'));
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['2017年', '2018年'],
|
|
align: 'right',
|
|
right: '40%',
|
|
top:'0%',
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: '16',
|
|
|
|
},
|
|
itemWidth: 16,
|
|
itemHeight: 16,
|
|
itemGap: 35
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
top:'40px',
|
|
right: '0%',
|
|
bottom: '2%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1)",
|
|
width: 1,
|
|
type: "solid"
|
|
},
|
|
},
|
|
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
// rotate:50,
|
|
show: true,
|
|
splitNumber: 15,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,.6)",
|
|
fontSize: '16',
|
|
},
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisLabel: {
|
|
//formatter: '{value} %'
|
|
show:true,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,.6)",
|
|
fontSize: '16',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1 )",
|
|
width: 1,
|
|
type: "solid"
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1)",
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '2017年',
|
|
type: 'bar',
|
|
data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
|
|
barWidth:'15', //柱子宽度
|
|
// barGap: 1, //柱子之间间距
|
|
itemStyle: {
|
|
normal: {
|
|
color:'#2f89cf',
|
|
opacity: 1,
|
|
barBorderRadius: 5,
|
|
}
|
|
}
|
|
}, {
|
|
name: '2018年',
|
|
type: 'bar',
|
|
data: [1, 4, 5, 11, 12, 9, 5, 6, 5, 6, 3, 9],
|
|
barWidth:'15',
|
|
// barGap: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
color:'#62c98d',
|
|
opacity: 1,
|
|
barBorderRadius: 5,
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
|
|
/* */
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function echarts_5() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart5'));
|
|
option = {
|
|
// backgroundColor: '#00265f',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['2017年', '2018年'],
|
|
align: 'right',
|
|
right: '40%',
|
|
top:'0%',
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: '16',
|
|
|
|
},
|
|
|
|
itemGap: 35
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
top:'40px',
|
|
right: '0%',
|
|
bottom: '2%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1)",
|
|
width: 1,
|
|
type: "solid"
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
// rotate:50,
|
|
show: true,
|
|
splitNumber: 15,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,.6)",
|
|
fontSize: '16',
|
|
},
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisLabel: {
|
|
//formatter: '{value} %'
|
|
show:true,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,.6)",
|
|
fontSize: '16',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1 )",
|
|
width: 1,
|
|
type: "solid"
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1)",
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '2017年',
|
|
type: 'line',
|
|
|
|
data: [2, 6, 3, 8, 5, 8, 10, 13, 8, 5, 6, 9],
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
color:'#2f89cf',
|
|
opacity: 1,
|
|
|
|
barBorderRadius: 5,
|
|
}
|
|
}
|
|
}, {
|
|
name: '2018年',
|
|
type: 'line',
|
|
data: [5, 2, 6, 4, 5, 12, 5, 17, 9, 2, 6, 3],
|
|
barWidth:'15',
|
|
// barGap: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
color:'#62c98d',
|
|
opacity: 1,
|
|
barBorderRadius: 5,
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function zb1() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('zb1'));
|
|
var v1=60//结算数
|
|
var v2=40//未结算数
|
|
var v3=v1+v2//总订单数
|
|
option = {
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['60%', '70%'],
|
|
color:'#49bcf7',
|
|
label: {
|
|
normal: {
|
|
position: 'center'
|
|
}
|
|
},
|
|
data: [{
|
|
value: v1,
|
|
name: '数量结算率',
|
|
label: {
|
|
normal: {
|
|
formatter:Math.round( v1/v3*100)+ '%',
|
|
textStyle: {
|
|
fontSize: 30,
|
|
color:'#fff',
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: v2,
|
|
label: {
|
|
normal: {
|
|
formatter : function (params){
|
|
return '数量结算率'
|
|
},
|
|
textStyle: {
|
|
color: '#aaa',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(255,255,255,.2)'
|
|
},
|
|
emphasis: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
}]
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function zb2() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('zb2'));
|
|
var v1=80//结算数
|
|
var v2=20//未结算数
|
|
var v3=v1+v2//总订单数
|
|
option = {
|
|
|
|
//animation: false,
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['60%', '70%'],
|
|
color:'#49bcf7',
|
|
label: {
|
|
normal: {
|
|
position: 'center'
|
|
}
|
|
},
|
|
data: [{
|
|
value: v1,
|
|
name: '数量结算率',
|
|
label: {
|
|
normal: {
|
|
formatter:Math.round( v1/v3*100)+ '%',
|
|
textStyle: {
|
|
fontSize: 24,
|
|
color:'#fff',
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
value: v2,
|
|
label: {
|
|
normal: {
|
|
formatter : function (params){
|
|
return '数量结算率'
|
|
},
|
|
textStyle: {
|
|
color: '#aaa',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(255,255,255,.2)'
|
|
},
|
|
emphasis: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
}]
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function zb3() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('zb3'));
|
|
var v1=30//结算金额
|
|
var v2=70//未结算
|
|
var v3=v1+v2
|
|
option = {
|
|
series: [{
|
|
|
|
type: 'pie',
|
|
radius: ['60%', '70%'],
|
|
color:'#62c98d',
|
|
label: {
|
|
normal: {
|
|
position: 'center'
|
|
}
|
|
},
|
|
data: [{
|
|
value: v1,
|
|
name: '金额结算率',
|
|
label: {
|
|
normal: {
|
|
formatter:Math.round( v1/v3*100)+ '%',
|
|
textStyle: {
|
|
fontSize: 24,
|
|
color:'#fff',
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
value: v2,
|
|
label: {
|
|
normal: {
|
|
formatter : function (params){
|
|
return '金额结算率'
|
|
},
|
|
textStyle: {
|
|
color: '#aaa',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(255,255,255,.2)'
|
|
},
|
|
emphasis: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
}]
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function zb4() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('zb4'));
|
|
var v1=90//结算金额
|
|
var v2=10//未结算
|
|
var v3=v1+v2
|
|
option = {
|
|
series: [{
|
|
|
|
type: 'pie',
|
|
radius: ['60%', '70%'],
|
|
color:'#29d08a',
|
|
label: {
|
|
normal: {
|
|
position: 'center'
|
|
}
|
|
},
|
|
data: [{
|
|
value: v1,
|
|
name: '金额结算率',
|
|
label: {
|
|
normal: {
|
|
formatter:Math.round( v1/v3*100)+ '%',
|
|
textStyle: {
|
|
fontSize: 24,
|
|
color:'#fff',
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
value: v2,
|
|
label: {
|
|
normal: {
|
|
formatter : function (params){
|
|
return '金额结算率'
|
|
},
|
|
textStyle: {
|
|
color: '#aaa',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(255,255,255,.2)'
|
|
},
|
|
emphasis: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
}]
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|