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%;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: '数据对比', // 文本块文字.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0