话不多说直接上代码:
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="Circlechart" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript"> function Circlelinechart(){ let myChart = echarts.init(document.getElementById("Circlechart")); let option = { color: ['#23649e', '#2e7bad', '#1dc499', '#4da7c1', '#65b5c2'], grid: { left: 0, bottom: 0, top:0, containLabel: true }, legend: { orient: 'vertical', top: "middle", right: "12%", textStyle: { color: '#788288', fontSize: 13, }, icon: 'roundRect', data: [{"name": "1","value": 10}, {"name": "2","value": 10}, { "name": "3","value": 10}, {"name": "4","value": 10}, {"name": "5","value": 10}, ], }, series: [ // 主要展示层的 { radius: ['30%', '61%'], center: ['50%', '50%'], type: 'pie', label: { normal: { show: true, formatter: "{c}%", textStyle: { fontSize: 13, }, position: 'outside' }, emphasis: { show: true } }, labelLine: { normal: { show: true, length: 20, length2: 35 }, emphasis: { show: true } }, name: "民警训练总量", data: [{"name": "1","value": 10}, {"name": "2","value": 10}, { "name": "3","value": 10}, {"name": "4","value": 10}, {"name": "5","value": 10}, ], }, // 边框的设置 { name: '内边框', radius: ['30%', '34%'], center: ['50%', '50%'], type: 'pie', label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { normal: { show: false }, emphasis: { show: false } }, animation: false, tooltip: { show: false }, data: [{ value: 1, itemStyle: { color: "rgba(170, 0, 0, 76)", }, }], }, { name: '外边框', type: 'pie', clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 center: ['50%', '50%'], radius: ['65%', '65%'], label: { normal: { show: false } }, data: [{ value: 9, name: '', itemStyle: { normal: { borderWidth: 2, borderColor: '#61bad3' } } }] }, ] }; myChart.setOption(option); } Circlelinechart() </script> </body> </html>