$(window).load(function(){
$(".loading").fadeOut()
})
$(document).ready(function(){
var whei=$(window).width()
$("html").css({fontSize:whei/20})
$(window).resize(function(){
var whei=$(window).width()
$("html").css({fontSize:whei/20})
});
});
$(function () {
echarts_1()
echarts_2()
echarts_3()
function echarts_1() {
var myChart = echarts.init(document.getElementById('echart1'));
option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 500,
max: 600,
inRange: {
}
},
series: [{
name: '分布',
type: 'pie',
radius: ['30%', '60%'],
center: ['50%', '50%'],
color: ['#f8b62c', '#FE5050', '#0086e5', '#57bc2f'],
data: [{
value: 70,
name: '微信'
},
{
value: 50,
name: '支付宝'
},
{
value: 20,
name: '银行卡'
},
{
value: 15,
name: '其它'
}
].sort(function(a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
normal: {
formatter: ['{d|{d}%}', '{b|{b}}'].join('\n'),
rich: {
d: {
color: 'rgb(241,246,104)',
fontSize: 14,
fontWeight:'bold',
},
b: {
color: 'rgb(98,137,169)',
fontSize: 12,
},
},
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgb(98,137,169)',
},
smooth: 0.2,
length: 5,
length2: 9,
}
},
itemStyle: {
normal: {
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 50,
}
}
}]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_3() {
var myChart = echarts.init(document.getElementById('echart3'));
option = {
color: ['#1aa1ff', '#31c17b', '#ff6535'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '10',
top:'10%',
right: '0%',
bottom: '3%',
containLabel: true
},
xAxis: {
data: ['2014', '2015', '2016', '2017', '2018', '2019'],
axisLine: {show:false,},
axisLabel: {
color: 'rgba(255,255,255,.6)',
fontSize: 14
}
},
yAxis: {
splitNumber:4,
nameTextStyle: {
color: 'rgba(255,255,255,.6)',
fontSize: 14
},
axisLine: { show:false, },
axisLabel: {
color: 'rgba(255,255,255,.6)',
fontSize: 14
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
type: "dotted"
}
},
},
series: [{
type: 'bar',
barWidth: '30',
itemStyle: {
normal: {
barBorderRadius: 2,
color: function(params) {
var colorList = [
'#0074c2','#00b59d','#00be2b','#abd300','#f4e000',
'#ffab00','#ff7100','#f00c00','#c90061', '#c900c7','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
formatter: '{c}',
color: 'rgba(255,255,255,.4)',
fontSize: 12
}
}
},
data: [ 5, 12, 35, 100, 150, 235]
}]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_2() {
var myChart = echarts.init(document.getElementById('echart2'));
option = {
color: ['#1aa1ff', '#31c17b', '#ff6535'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '10',
top:'10%',
right: '0%',
bottom: '3%',
containLabel: true
},
xAxis: {
data: ['商超', '零销', '餐饮', '百货', '其它'],
axisLine: {show:false,},
axisLabel: {
color: 'rgba(255,255,255,.6)',
fontSize: 14
}
},
yAxis: {
splitNumber:4,
nameTextStyle: {
color: 'rgba(255,255,255,.6)',
fontSize: 14
},
axisLine: { show:false, },
axisLabel: {
color: 'rgba(255,255,255,.6)',
fontSize: 14
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
type: "dotted"
}
},
},
series: [{
type: 'bar',
barWidth: '30',
itemStyle: {
normal: {
barBorderRadius: 2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#4693EC"
},
{
offset: 1,
color: "#00FFE3"
}
]),
label: {
show: true,
position: 'top',
formatter: '{c}',
color: 'rgba(255,255,255,.4)',
fontSize: 12
}
},
},
data: [1250, 605, 264, 445, 125]
}]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
})