echarts实现手机端课程数据统计tab选项卡柱状图、饼图、折线图切换效果代码-html代码-BFW代码库

echarts实现手机端课程数据统计tab选项卡柱状图、饼图、折线图切换效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现手机端课程数据统计tab选项卡柱状图、饼图、折线图切换效果代码

代码标签： echarts 手机端课程数据统计 tab 选项卡柱状图饼图折线图切换

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
<style>
    ul,li,header{display:block;margin:0;padding:0;border:0;}
body{
    font-family: '微软雅黑';
    color:#666;min-width: 
    320px;max-width:750px;
    margin: 0 auto;
    cursor:default;
    word-break:break-all;
    white-space:normal;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
    font-size:0.24rem;
    background-color:#f5f5f5;}
ul,li{ list-style: none}
a{text-decoration:none;}
/*iphone上的Safari解析input[typw="submit"]和input[type="submit"]按钮会以苹果浏览器默认的UI进行渲染，解决发放如下*/
input,input[type="button"],input[type="submit"]，input[type="reset"]{-webkit-appearance: none;}
/*header*/
.favor-header-bar{
    background-color: #4781fe;
    padding: 0 1.1rem;
    overflow: hidden;
    height: 3.46rem;
    line-height: 3.46rem;
    border-bottom: 1px solid #e1e1e1;
}
.favor-header-bar p{
    text-align: center;
    color: #fff;
    font-size: 1rem;
    line-height: 3.46rem;
    height: 3.46rem;
    margin: 0;
}
.tabClick{ background: #f3f3f3; overflow: hidden}
.tabClick li{ height:3rem; line-height: 3rem; width: 33.33%; float: left; text-align: center;color: #999;}
.tabClick li.active{ color: #4781fe; transition: 0.1s; font-weight: bold}
.tabCon{ overflow: hidden}
.tabBox{ position: relative}
.tabList{
    word-break: break-all; 
    width:100%;float:left; 
    /* line-height:100px;  */
}
.lineBorder{ height: 2px; overflow: hidden; border-bottom:1px solid #eee; background: #f3f3f3}
.lineDiv{ background: #4781fe; height: 2px; width: 33.33%;}
.statistics{
    width: 100%;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:flex-end;
    color: #666;
    margin-top: 2rem;
}
.statistics li{
    width: 50%;
    text-align:center;
}
.statistics .statmoney{
    width: 33.333%;
}
.statistics .model{
    height: 1.2rem;
    line-height: 1.2rem;
    color: #000;
    font-size:0.8rem;
}
#chart2{
    margin-top: 0.8rem;
}
.timeyear{
    width: 3rem;
    text-align: center;
    border-radius: 1rem;
    padding: 0.1rem 0.8rem;
    font-size: 0.88rem;
    color: #4781fe;
    border: 1px solid #4781fe;
    float: right;
}
.tabList .shijian{
    padding: 0.6rem 1rem 0 1rem;
    height: 2rem;
}
.tabList .shijian .biaoti{
    display: block;
    height: 2rem;
    line-height: 2rem;
    color: #000;
    float: left;
}
</style>
</head>

<body>
    <header class="favor-header-bar">
        <p>数据中心</p>
    </header>
    <div class="wrap" id="wrap">
        <ul class="tabClick">
            <li class="active">到课统计</li>
            <li>学费统计</li>
            <li>学生统计</li>
        </ul>
        <div class="lineBorder">
            <div class="lineDiv"></div>
        </div>
        <div class="tabCon">
            <div class="tabBox">
                <div class="tabList">
                    <div id="chart1" style="width: 80%;height: 260px;left: 10%;"></div>
                    <ul class="statistics">
                        <li>
                            <div class="model">18</div>
                            <span>未到（人）</span>
                        </li>
                        <li>
                            <div class="model">189</div>
                            <span>已到（人）</span>
                        </li>
                    </ul>
                </div>
                <div class="tabList">
                    <div class="shijian">
                        <span></span>
                        <div class="timeyear">2019</div>
                    </div>
                    <div id="chart2" style="width: 85.........完整代码请登录后点击上方下载按钮下载查看