设计图效果
没有用echart前
用了echart
问题
标题的位置设置为top:-10，就向上移，但是标题就展示不完，如何达到标题与饼图有上下的距离
饼图的背景色怎么换
饼图的文字说明，怎么设置展示value,不展示name
代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>错题详情</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/jie.css"/>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
</head>
<body style="background-color: #fff">
<!--顶部-->
<header class="jie-header">
<div class="jie-goback"><img src="images/goBack.jpg" alt="goback"/></div>
<h1 class="header-title">试卷</h1>
<div class="header-right">
<span class="del">删除</span>
<img class="yellow-del" src="images/yellowDel.jpg" alt="del"/>
</div>
</header>
<!--内容-->
<section class="single-selection">
<div class="selection-header">
<div class="header-title">2017年普通高等学校招生全国统一考试(新课标||卷): 理综</div>
<div class="header-text">(本试卷难度3.2, 总分120分,考试时间为100分钟)</div>
</div>
<div class="selection-body">
<h2>共分为3个总分</h2>
<div class="jie-hr"></div>
<div id="main" style="width: 6.0rem;height:4.0rem;"></div>
</div>
<div class="selection-footer">
<div class="body-button">开始答题</div>
</div>
</section>
<!--底部-->
<footer class="jie-footer">
<div class="footer-item-left">
<img class="text-img" src="images/indexHomeYellow.jpg" alt="home"/>
<p class="item-text">首页</p>
</div>
<div class="footer-item-center">
<img class="text-img" src="images/indexErrorWhite.jpg" alt="error-title"/>
<p class="item-text">错题库</p>
</div>
<div class="footer-item-right">
<img class="text-img" src="images/indexMyWhite.jpg" alt="mg"/>
<p class="item-text">我的</p>
</div>
</footer>
<script src="js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '总共分为3个部分'
},
tooltip: {},
legend: {
bottom: 0,
left: 'center',
data: ['单选题', '多选题','完型填空']
},
series: [{
name: '销量',
type: 'pie',
data: [
{value:100, name: "单选题"},
{value:50, name: "多选题"},
{value:25, name: "完型填空"}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
- 3 回答
- 0 关注
- 1735 浏览
添加回答
举报
0/150
提交
取消