<!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="width: 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', width: 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>