Echarts餅形圖 圖例
阿新 • • 發佈：2020-08-26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./echarts.min.js"></script> </head> <body> <div id="a" style="width: 500px; height: 500px;"></div> </body> <script> var myChart = echarts.init(document.getElementById('a')) option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },//餅圖中間顯示文字 graphic:{ type:'text', left:'center', top:'center', style:{ text:"重點警情 \n 1,963",// \n是換行 textAlign:'center', //字型居中 fill:'#000', //字型顏色 fontSize:15 //字型大小 } }, legend: { orient: 'vertical', left: 10, show:false }, grid:{ show:false, // 距離頭部的距離 top:'10%', left:'10%', // x2:'90%', // 距離底部的距離 bottom:'15%', // 修改y軸文字樣式 textStyle:{ fontSize: 12,//字型大小 color: '#fff'//字型顏色 }, } , series: [ { name: '警情統計', type: 'pie', radius: ['50%', '80%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: true }, // 圖外樣式 itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, // 這裡做改變 normal:{ //正常樣式 // 標籤 label:{ show: true, // 顯示資料名稱以及具體的資料 // formatter: '{b} : {c} ({d}%)' , // 只顯示資料名稱 formatter: '{b}', fontSize: '14', color:'red', }, labelLine :{ show:false } } }, color:['#E74A3B','#889B98','#3395D9'], data: [ {value: 400, name: '詐騙 '}, {value: 400, name:'兩搶'}, {value: 500, name: '盜搶'}, ] } ] } myChart.setOption(option) window.onresize=function(){ myChart.resize() } </script> </html>