百度echarts折线图使用示例

引入echarts.js
<script src="${js}/echarts.min.js"></script>
 
定义一个容器存放echarts图表
<div id="charts" style="100%;"></div>

 var myChart=echarts.init(document.getElementById("charts"));
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['今日','昨日','前日']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            //x轴间隔3个单位显示
            axisLabel :{
                interval: 3
            },
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'今日',
                type:'line',
                data:[]
            },
            {
                name:'昨日',
                type:'line',
                data:[]
            },
            {
                name:'前日',
                type:'line',
                data:[]
            }
        ]
    };
    myChart.setOption(option);

    function getCharts(type,tag_id) {
        var hoursList=[];
        var todays=[];
        var yesterdays=[];
        var beforeYesterdays=[];
        $.ajax({
            url:"/track/stat/ajax/getcharts",
            data:{"tag_id":tag_id,"type":type},
            success:function(data){
                $.each(data.hoursList,function(n,value){
                    hoursList.push(value);
                });

                $.each(data.todays,function(n,value){
                    todays.push(value);
                });

                $.each(data.yesterdays,function(n,value){
                    yesterdays.push(value);
                });

                $.each(data.beforeYesterdays,function(n,value){
                    beforeYesterdays.push(value);
                });

                myChart.setOption({
                    title: {
                        text: ''
                    },
                    xAxis: {
                        data: hoursList
                    },
                    series: [
                        {
                            // 根据名字对应到相应的系列
                            name: '今日',
                            data: todays
                        },
                        {
                            name: '昨日',
                            data: yesterdays
                        },
                        {
                            name: '前日',
                            data: beforeYesterdays
                        }
                    ]
                });
            }
        });
    };

　　

文末小福利免费视频资源网站：www.sousuohou.com