echart 笔记
function(data){
var that=this;
var axisX=[],data1=[],data2=[],data3=[];
data.forEach(function(value,index){
axisX.push(value.month);
data1.push(value.active);
data2.push(value.avgDau);
data3.push(value.avgDauVsMau);
});
//求最左侧的Y轴范围
var maxActive = 0;
var maxAvgDau = 0;
if(data1.length > 0){
maxActive = Math.max.apply(null,data1);
}
if(data2.length > 0){
maxAvgDau = Math.max.apply(null,data2);
}
var maxY = maxActive > maxAvgDau ? maxActive : maxAvgDau;
if(maxY == 0){
maxY = 100;
}
var a = Math.ceil(maxY/(Math.pow(10,((maxY+'').length-1))));
var scaleNum = Math.ceil(a*(Math.pow(10,((maxY+'').length-1)))/5);
var axisY = [0,scaleNum*1,scaleNum*2,scaleNum*3,scaleNum*4,scaleNum*5];
//求最右侧的Y轴范围
var maxY2 = 100,minY2=0;
if(data3.length>0){
maxY2 = Math.max.apply(null,data3);
minY2 = Math.min.apply(null,data3);
}
var axisY2 = calculateY2(maxY2,minY2,1);
//获取Y轴最大最小值
axisY = [Math.min.apply(null,axisY),Math.max.apply(null,axisY)];
//axisY2 = [Math.min.apply(null,axisY2),Math.max.apply(null,axisY2)]
var Y2_max = Math.max.apply(null,axisY2);
var Y2_min = Math.min.apply(null,axisY2);
if(Y2_max >= 200){
Y2_max = 200;
}
if(Y2_min <= -200){
Y2_min = -200;
}
axisY2 = [Y2_min,Y2_max];
var chart = createComplexChart('.month-chart1', {
axisX:axisX ,
enableCross: true,
axisY: axisY,
data: [data1,data2],
axisY2: axisY2,
data2: [data3]
});
function createComplexChart(container, options){
var option = {
title: {
left:'center' ,
top:'0px',
textStyle: {
color: '#666',
fontWeight: 'normal'
}
},
grid: [
{x: '60',x2: '60', y: '7%', height: '80%'},
],
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,1)',
borderColor:'#eee',
borderWidth:1,
textStyle:{
color:'#aaa'
},
formatter:function(params){
var relVal = '';
for (var i = 0, l = params.length; i < l; i++) {
if(i <=1){
relVal += ' '">'
+ ''"> '+params[i].seriesName+':'+(params[i].value == undefined ? "" :params[i].value)+'
';
}else{
relVal += ' '">'
+ ''"> '+params[i].seriesName+':'+(params[i].value == undefined ? "" :params[i].value +'%')+'
';
}
}
return relVal;
},
},
legend: {
// data:['降水量','折线','折线2'],
x: 'center',
y: 'bottom',
itemWidth:36,
itemHeight:6,
itemGap:30,
//orient:'horizontal',
data:[
{
name:'MAU',
textStyle:{
fontSize:12,
color:'#aaa'
},
icon:'stack'
},
{
name:'日均DAU',
textStyle:{
fontSize:12,
color:'#aaa'
},
icon:'stack'
},
{
name:'DAU/MAU',
textStyle:{
fontSize:12,
color:'#aaa',
},
icon:'stack'
}
]
},
xAxis: [
{
type: 'category',
axisTick:{
show:false
},
axisLabel: {
textStyle: {
color: '#aaa',
}
},
axisLine:{
lineStyle:{
color:'#aaa',
}
},
data: options.axisX
}
],
yAxis: [
{
type: 'value',
axisTick:{
show:false
},
axisLine:{
show:false
},
nameLocation : 'middle',
min: options.axisY[0],
max: options.axisY[1],
interval: (options.axisY[1]-options.axisY[0])/5,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: '#aaa',
}
},
},
{
type: 'value',
axisTick:{
show:false
},
axisLine:{
show:false
},
nameLocation : 'middle',
min: options.axisY2[0],
max: options.axisY2[1],
interval: (options.axisY2[1]-options.axisY2[0])/5,
axisLabel: {
formatter: '{value} %',
textStyle: {
color: '#aaa',
}
}
}
],
series: [
{
name:'MAU',
type:'bar',
barMaxWidth:window.barMaxWidth,
yAxis: 1,
itemStyle: {
normal: {
color: '#7DAAE2',
}
},
label:{
normal:{
show: true,
position: 'top',
textStyle:{
fontSize:12,
color:'#666',
},
formatter:function(c){
return c.value==0?'':c.value;
}
}
},
data:options.data[0],
barGap :0
},
{
name:'日均DAU',
type:'bar',
barMaxWidth:window.barMaxWidth,
yAxis: 1,
itemStyle : { /*设置折线颜色*/
normal : {
color:'#6EE0DC'
}
},
label:{
normal:{
show: true,
position: 'top',
textStyle:{
fontSize:12,
color:'#666',
},
formatter:function(c){
return c.value==0?'':c.value;
}
}
},
data:options.data[1],
barGap :0
},
{
name:'DAU/MAU',
type:'line',
yAxisIndex: 1,
symbol:'emptyCircle',
symbolSize : 10,
itemStyle : { /*设置折线颜色*/
normal : {
color:'#F8967E',
borderWidth:2,
borderColor:'#F8967E',
}
},
label:{
normal:{
show: true,
position: 'top',
textStyle:{
fontSize:12,
color:'#666',
},
formatter: '{c}%'
}
},
data:options.data2[0]
}
]
};
// 基于准备好的dom，初始化echarts实例
var analyticChart = echarts.init($(container).get(0));
analyticChart.setOption(option);
}
},