$(window).load(function(){$(".loading").fadeOut()})
$(function () {
echarts_1();
echarts_2();
echarts_3();
echarts_4();
echarts_5();
zb1();
zb2();
zb3();
zb4();
function echarts_1() {
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() {
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() {
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() {
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,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '16',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
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',
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',
itemStyle: {
normal: {
color:'#62c98d',
opacity: 1,
barBorderRadius: 5,
}
}
},
]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_5() {
var myChart = echarts.init(document.getElementById('echart5'));
option = {
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,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '16',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
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',
itemStyle: {
normal: {
color:'#62c98d',
opacity: 1,
barBorderRadius: 5,
}
}
},
]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function zb1() {
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() {
var myChart = echarts.init(document.getElementById('zb2'));
var v1=80
var v2=20
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: 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() {
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() {
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();
});
}
})