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 += ' <span class="tooltip-class" style="background-color:'+params[i].color+'"></span>' 
                                               + '<span style="font-size:12px;color:'+params[i].color+'"> '+params[i].seriesName+':<span class="number-class">'+(params[i].value == undefined ? "" :params[i].value)+'</span></span><br/>';
                                            }else{
                                             relVal += ' <span class="tooltip-class" style="background-color:'+params[i].color+'"></span>' 
                                               + '<span style="font-size:12px;color:'+params[i].color+'"> '+params[i].seriesName+':<span class="number-class">'+(params[i].value == undefined ? "" :params[i].value +'%')+'</span></span><br/>';
                                            }
                                        }
                                       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);
                }
        },