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

代码语言：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%;height: 250px;left: 5%;"></div>
                    <ul class="statistics">
                        <li class="statmoney">
                            <div class="model">￥<span>1889</span></div>
                            <span>消费总额（元）</span>
                        </li>
                        <li class="statmoney">
                            <div class="model">￥<span>499</span></div>
                            <span>学杂费（元）</span>
                        </li>
                        <li class="statmoney">
                            <div class="model">￥<span>1200</span></div>
                            <span>生活费（元）</span>
                        </li>
                    </ul>
                </div>
                <div class="tabList">
                    <div class="shijian">
                        <span class="biaoti">学生</span>
                        <div class="timeyear">2019</div>
                    </div>
                    <div id="chart3" style="width: 85%;height: 250px;left: 5%;"></div>
                    <ul class="statistics">
                        <li>
                            <div class="model">1063</div>
                            <span>学生总数（人）</span>
                        </li>
                        <li>
                            <div class="model">189</div>
                            <span>今年新增（人）</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <script charset="utf-8">
    var chart1 = echarts.init(document.getElementById("chart1"));
	
// 圆环图各环节的颜色
var color = ['#a5b7fd', '#597bfc', '#0035fb'];

// 圆环图各环节的名称和值(系列中各数据项的名称和值)
var data =[{  
                name: '任课教师',
                value: 18
            },{
                name: '到课学生',
                value: 100
            },{
                name: '未课学生',
                value: 8
            }];
  
// 指定图表的配置项和数据
var option = {
    
    //背景色
    backgroundColor: {			// 背景颜色
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [],
        globalCoord: false // 缺省为 false
    },
    
    // 标题
    title: [{
        // text: '到勤统计',
        top:'5%',
        left:'3%',
        textStyle:{
            color: '#000',
            fontSize:18,
        }
    }],
    
    // 图例
    legend: {
        selectedMode:true,             // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
        itemWidth:15,  
        itemHeight:15, 
        textStyle: {                      // 图例的公用文本样式。
            fontSize: 14,
            color: '#000'
           },
        orient: 'horizontal',
        x: 'center',
        y : 'bottom',
        data: ['任课教师','到课学生','未课学生'],
    },    
    // 提示框
    tooltip: {
        show: true,                 // 是否显示提示框
        formatter: '{b} </br> 销量{c}件 </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
    },
    
    // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
    graphic: {
        type: 'text',               // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        top: 'center',              // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
        left: 'center',             // 同上
        style: {
            // text: '数据对比',       // 文本块文字。可以使用 \n 来换行。[ default: '' ]
            fill: '#fff',           // 填充色。
            fontSize: 16,           // 字体大小
            fontWeight: 'bold'		// 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
        }
    },
    
    // 系列列表
    series: [{
        name: '圆环图系列名称',         // 系列名称
        type: 'pie',                    // 系列类型 
        center:['50%','50%'],           // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
        radius: ['30%', '45%'],         // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
        hoverAnimation: true,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
        color: color,                   // 圆环图的颜色
        label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
            normal: {
                show: true,             // 是否显示标签[ default: false ]
                position: 'outside',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                formatter: '{b} : {c}件'  // 标签内容
            }
        },
        labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
            normal: {
                show: true,             // 是否显示视觉引导线。
                length: 15,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                length2: 10,            // 视觉引导项第二段的长度。
                lineStyle: {            // 视觉引导线的样式
                    //color: '#000',
                    //width: 1
                }
            }
        },
        data: data                      // 系列中的数据内容数组。
    }]
};

// 使用刚指定的配置项和数据显示图表
chart1.setOption(option);
    var chart_c1 = echarts.init(document.getElementById('chart2'));//指定的id要有高度和宽度
    var dataMoney = [0, 100, 200, 300, 400, 500, 600, 700, 800];//y轴
    var dataMouth = ['1','2','3','4','5','6','7','8','9','10','11','12'];//x轴
    //显示数据，可修改
    var data1 = [22, 24, 38, 43, 59, 25, 49, 34, 44, 34, 22, 46];
    var data2 = [35, 46, 43, 59, 60, 45, 53, 42, 56, 45, 36, 59];
    // 总计
    var data3 = function() {
        var datas = [];
        for (var i = 0; i < data1.length; i++) {
            datas.push(data1[i] + data2[i]);
        }
        return datas;
    }();
 
    option = {
        title: {
            // text: '费用统计',
            left: 'left',
            top: 'top',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            },
            formatter:function (params){
 
                var relVal = params[0].name+"<br/>";
                relVal += params[0].seriesName+ ' : ' + params[0].value+"例子"+"<br/>";
                relVal +=params[1].seriesName+ ' : ' +params[1].value+"<br/>";
                // relVal += params[2].seriesName+ ' : ' + params[2].value+"%";
                return relVal;
            }
        },
        legend: {
            // orient: 'vertical',
            // x: 'center',
            // y: 'top',
            selectedMode:false, 
            itemWidth:15,  
            itemHeight:15, 
            icon: 'circle',
            data:['生活费','学杂费']
        },
        grid: {
            left: '1%',
            right: '15%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                axisLine:{
                    symbol:['none','arrow'],
                    lineStyle:{
                        color:'#9b9b9b',
                    }    
                },
                name: '月份',
                data : dataMouth,
                splitLine:{
                    show:false,
                },
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLine:{
        .........完整代码请登录后点击上方下载按钮下载查看