echarts3样例

<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>