<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main6" style=" 1200px;height: 400px; background-color: #ccc;"></div>
<script>
var myChart = echarts.init(document.getElementById('main6'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'right',
orient: 'horizontal',
350, //图行例组件的宽度,默认自适应
x: 'right', //图例显示在右边 设置数字就是离左边多远
top: 20, //图例在垂直方向上面显示居中
itemWidth: 10, //图例标记的图形宽度
itemHeight: 10, //图例标记的图形高度
itemGap: 15,
},
series: [
/*1*/
{
name: '高血压患病率',
type: 'pie',
center: ['20%', '50%'],
//第一个代表内圆半径，第二个代表外圆半径
radius: ['40%', '50%'],
data: [{
value: 28,
name: '有病'
},
{
value: 72,
name: '没病'
}
],
itemStyle: { //图形样式
normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
label: { //饼图图形上的文本标签
show: false //平常不显示
},
},
},
},
// 2
{
name: '高血糖患病率',
type: 'pie',
radius: '18%',
center: ['45%', '50%'],
radius: ['40%', '50%'],
data: [{
value: 18,
name: '有'
},
{
value: 82,
name: '没'
}
],
itemStyle: { //图形样式
normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
label: { //饼图图形上的文本标签
show: false //平常不显示
},
},
},
},
// 3
{
name: '高血脂4患病率',
type: 'pie',
radius: ['40%', '50%'],
center: ['70%', '50%'],
data: [{
value: 12,
name: '患病'
},
{
value: 88,
name: '没病'
}
],
itemStyle: { //图形样式
normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
label: { //饼图图形上的文本标签
show: false //平常不显示
},
},
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
-
多个饼状图
作者：明月人倚楼
出处：https://www.cnblogs.com/IwishIcould/
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！
万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
支付宝
微信
如果文中有什么错误，欢迎指出。以免更多的人被误导。
-
相关阅读:
计算机注销、热启动、冷启动
从高处理解android与服务器交互（看懂了做开发就会非常的容易）
Android—Work—1day
软件需求分析方法
Android 常用控件的介绍
android中Json的一些应用
java数据传递例子+内存分析
android中MVP模式
android的四层体系结构，基于mvc三层结构浅析
java
- 原文地址：https://www.cnblogs.com/IwishIcould/p/15164638.html
