var myChart = echarts.init(document.getElementById('chart1'));
var myChart2 = echarts.init(document.getElementById('chart2'));
var myChart3 = echarts.init(document.getElementById('chart3'));
option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '9%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}//将统计图保存为
}
,right:100
,top:0
},
xAxis: {
type: 'category',
boundaryGap:false,
data:['11.07','11.08','11.09','11.10','11.11','11.12','11.13','11.14','11.15','11.16']
},
yAxis: {
type: 'value'
/*min:0,
max:60,
splitNumber:6*/
},
series: [
{
name:'浏览次数',
type:'line',
stack: '总量1',
areaStyle: {normal: {}},
data:['10','22','10','50','13','31','15','10','22','10'],
itemStyle : {normal : {color:'#32A8FF'}}
}
]
};
option2 = {
title: {
x:"left",
text: '门票销量',
textStyle:{
fontSize:14
,fontWeight:'normal'
,color:'#565656'
}
,left:20
,top:10
},
color: ['#32A8FF'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['免费票', '589元', '998元', '1288元'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'销量',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334]
}
]
};
option3 = {
title: {
x:"left",
text: '收入',
textStyle:{
fontSize:14
,fontWeight:'normal'
,color:'#565656'
}
,left:20
,top:10
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
data:['线下支付','微信支付'],
color:['#32A8FF',' #02C800'],
orient:'vertical'
,right:20
,top:10
,textStyle:{
color:['#32A8FF',' #02C800']
}
,itemWidth:14
},
series: [
{
name:'收入总额¥1200',
type:'pie',
radius:['50%','70%'],
avoidLabelOverlap:false,
color:['#32A8FF',' #02C800'],
data:[{value:'334',name:'线下支付'},{value:566,name:'微信支付'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
myChart2.setOption(option2);
myChart3.setOption(option3);
/*窗口自适应,关键代码*/
$(window).resize(function(){
myChart.resize();
myChart2.resize();
myChart3.resize();
});