• 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',
    3
    }
    }
    }
    }]
    };
    if (option && typeof option === "object") {
    myChart.setOption(option, true);
    }
    }


  • 相关阅读:
    机器学习之线性回归
    斯坦福机器学习【5】生成学习算法(高斯判别与朴素贝叶斯)
    网络编程
    正则表达式
    Mysql
    python爬虫
    nginx
    maven基础
    sping入门
    河北省重大技术需求征集八稿第一天
  • 原文地址:https://www.cnblogs.com/holy-amy/p/8580806.html
Copyright © 2020-2023  润新知