echarts手机端，数据多时可以滚动

<div id="container" style="height: 400px"></div>

<script type="text/javascript" src="<!--{$skinUrl}-->js/jquery.min.js"></script>

<script type="text/javascript" src="<!--{$skinUrl}-->js/echarts.common.min.js"></script>

function initData(type,num) {
    $.post('report.ajaxload.html',{type:type,num:num}, function(data){
        var tbhtml = "";
        var listLth=data.list.length;
        for(var i=0; i<listLth;i++){
            tbhtml += '<tr><td>'+data.list[i].payDate+'</td>';
            tbhtml += '<td>'+data.list[i].num+'</td>';
            tbhtml += '<td>'+data.list[i].payamount+'</td></tr>';
        }
        $("#tbody").html(tbhtml);

        var detail= data.report;
        hightChartsfn(detail,num);
    }, 'json');
}

var data='<!--{$data.report}-->';
data = JSON.parse(data);
hightChartsfn(data,0);
function hightChartsfn(data,num) {
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var title = data.title;
    var detail = data.detail;
    var end = 100;
    if(num>0){
        end = 50;
    }
    option = null;
    option = {
        backgroundColor:'#fff',
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: title
        },
        tooltip: {
            trigger: 'axis'
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 0,
                end: end
            },
            {
                type: 'inside',
                realtime: true,
                start: 0,
                end: end
            }
        ],
        series: [{
            name:'销售额',
            data: detail,
            type: 'line',
            itemStyle:{
                normal:{
                    color:'#4cabdd',
                    lineStyle:{
                        color:'#4cabdd',
                        width:3
                    }
                }
            }
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

巴特西

echarts手机端，数据多时可以滚动

最新文章

热门文章