zoukankan      html  css  js  c++  java
  • 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);
    }
    }


  • 相关阅读:
    DES算法
    流密码_电子科大慕课笔记_七八讲
    王道考研《2019年操作系统考研复习指导》第一章笔记
    欧拉公式C++实现
    编译原理第一章学习笔记
    leetcode 728. Self Dividing Numbers
    leetcode 942. DI String Match
    2019年第十届蓝桥杯JAVA开发A组第二题
    2019年第十届蓝桥杯JAVA开发A组第一题
    python类的内置方法
  • 原文地址:https://www.cnblogs.com/holy-amy/p/8580806.html
Copyright © 2011-2022 走看看