<script type="text/javascript" src="echarts.min.js"></script>

<div id="main" style="width: 600px; height: 250px;">&nbsp;</div>

<div id="main1" style="width: 600px; height: 250px;">&nbsp;</div>

<div id="main2" style="width: 600px; height: 400px;">&nbsp;</div>

<div id="main3" style="width: 600px; height: 400px;">&nbsp;</div>

<script type="text/javascript">// <![CDATA[

    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    var myChart1 = echarts.init(document.getElementById('main1'));

    var myChart2 = echarts.init(document.getElementById('main2'));

    var myChart3 = echarts.init(document.getElementById('main3'));

    // 指定图表的配置项和数据

    var option = {

        title: {

            text: '活跃用户（万）',

        },

        tooltip: {},

        color:['#fbad0a','#0f8fe9','#01ae45'],

        tooltip: {

            trigger: 'axis',

            axisPointer: {type: 'cross'},

            formatter: function(a){

                // console.log(a)

                return (

                        a[0]['axisValueLabel']+"<br>"+

                        '<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: '+a[0]['color']+'"></span>'+

                        a[0]['seriesName'] +':'+a[0]['value']+"<br>"+

                        '<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: '+a[1]['color']+'"></span>'+

                        a[1]['seriesName'] +':'+a[1]['value']+"<br>"+

                        '<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: '+a[2]['color']+'"></span>'+

                        a[2]['seriesName'] +':'+a[2]['value']+"%"

                );

            },

        },

        legend: {

            bottom:0,

            left:'center',

            data:[

                {

                    name:'vv',

                    icon:'roundRect',

                    textStyle:{

                        color:'yellow'

                    }

                },

                {name:'uv' ,icon:'roundRect',},

                {name:'转化率' ,icon:'roundRect',}

            ]

        },

        xAxis: {

            data: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"]

        },

        yAxis: [{

            type: 'value',

            name: '',

            min: 0,

            position: 'left',

            axisLabel: {},

        }, {

            type: 'value',

            name: '',

            min: 0,

            position: 'right',

            axisLabel: {

                formatter: '{value} %'

            }

        }],

        series: [{

            name: 'vv',

            type: 'bar',

            data: [5, 2, 6, 15, 18, 28,58, 22, 23, 20, 30, 10,50, 25, 40]

        },

            {

                name: 'uv',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20,5, 20, 36]

            },

            {

                name: '转化率',

                type: 'line',

                yAxisIndex:1,

                data: ["1", "20", "30", "40", "50", "80","1", "20", "30", "40", "50", "80", "40", "50", "80"]

            }

        ]

    };

    // 指定图表的配置项和数据

    var option1 = {

        title: {

            text: '堆叠区域图'

        },

        tooltip : {

            trigger: 'axis',

            formatter: function(a){

               // console.log(a)

                return (

                        a[0]['axisValueLabel']+"<br>"+

                        '<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: '+a[0]['color']+'"></span>'+

                        a[0]['seriesName'] +':'+a[0]['value']+"<br>"+

                        '<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: '+a[1]['color']+'"></span>'+

                        a[1]['seriesName'] +':'+a[1]['value']+"<br>"+

                        '<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: '+a[2]['color']+'"></span>'+

                        a[2]['seriesName'] +':'+a[2]['value']+"<br>"+

                        '<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; "></span>'+

                        '留存率' +':'+Math.round(100*(a[1]['value']+a[2]['value'])/a[0]['value'])+"%"

                );

            },

            axisPointer: {

                type: 'cross',

                label: {

                    backgroundColor: '#6a7985'

                }

            }

        },

        color:['#fbad0a','#0f8fe9','#01ae45'],

        legend: {

            bottom:0,

            left:'center',

            itemWidth:10,

            itemHeight:10,

            itemRadius:5,

            data:[

                {

                    name:'新增用户',

                    icon:'roundRect',

                },

                {name:'七日留存用户' ,icon:'roundRect',},

                {name:'次日留存用户' ,icon:'roundRect',}

            ]

        },

        xAxis : [

            {

                type : 'category',

                boundaryGap : false,

                data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']

            }

        ],

        yAxis : [

            {

                type : 'value'

            }

        ],

        series : [

            {

                name:'新增用户',

                type:'line',

                smooth:true,

                areaStyle: {normal: {}},

                data:[720, 132, 101, 834, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,228]

            },

            {

                name:'七日留存用户',

                type:'line',

                smooth:true,

                areaStyle: {normal: {}},

                data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,352]

            },

            {

                name:'次日留存用户',

                type:'line',

                smooth:true,

                areaStyle: {normal: {}},

                data:[550, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,320]

            },

        ]

    };

/*****************************************************柱状图***********************************************************************/

    var option2 = {

        color: ['#3398DB'],

    title: {

        text: '月累计使用时长（万 小时）'

    },

        tooltip : {

            trigger: 'axis',

            axisPointer : {            // 坐标轴指示器，坐标轴触发有效

                type : 'line'        // 默认为直线，可选为：'line' | 'shadow'

            }

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis : [

            {

                type : 'category',

                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

                axisTick: {

                    alignWithLabel: true

                }

            }

        ],

        yAxis : [

            {

                type : 'value'

            }

        ],

        series : [

            {

                name:'直接访问',

                type:'bar',

                barWidth: '60%',

                label: {

                    normal: {

                        show: true,

                        position: 'top'

                    }

                },

                data:[10, 52, 200, 334, 390, 330, 220]

            }

        ]

    };

/******************************************************折线图********************************************************************************/

var option3 = {

    title: {

        text: '使用时长 （万小时）',

    },

    tooltip : {

        trigger: 'axis',

    },

    color:['#fbad0a'],

    xAxis: {

        type: 'category',

        name: 'x',

        splitLine: {show: false},

        data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']

    },

    grid: {

    },

    yAxis: {

    },

    series: [

        {

            name: '3的指数',

            type: 'line',

            data: [200, 3, 90, 270, 81, 247, 741, 223, 669]

        },

    ]

};

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

    myChart1.setOption(option1);

    myChart2.setOption(option2);

    myChart3.setOption(option3);

// ]]></script>