## :-: 餅狀圖：可以快速了解不同分類占比情況（pie） ``` <div style="width:600px;height:400px;margin:100px auto" id="chart"></div> ``` ``` // 餅狀統計圖，沒有x和y軸，只需要配置series // 數據格式:[{name:'',value:''},{name:'',value:''}] // type : pie chart(){ //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); // 數據 var pieData = [ {name : '淘寶',value : 1000}, {name : '京東',value : 2000}, {name : '拼多多',value : 99}, {name : '唯品會',value : 1999} ]; // 配置項 var option = { //系列列表 series : [ { type : 'pie',//類型：bar：柱狀圖，line：折線圖，pie：餅裝圖 data : pieData, //如果要單獨控制一項的樣式，需要在data中單獨控制，添加屬性 // emphasis : { //itemStyle : { //color : 'pink', //}, // label : {color:'blank'} // } //顯示數值 label : { show : true,//設置顯示 // formatter : 'hh',//文字顯示的內容 formatter : function(arg){//通過回調函數動態顯示文字內容,percent:所占百分比 return arg.name + '平臺' + arg.value + '元\n' + arg.percent + '%' }, //color : 'green',//文字顏色 }, ** 重點配置：通過半徑改變顯示不同類型** // radius : 20,//圓的半徑:固定值 // radius : '20%',//圓的半徑：百分比參照的是寬度和高度中較小的那一部分的一半開進行百分比設置 // radius : ['50%','75%'],//圓環的實現，數組第一個參數：內圓半徑，第二個參數：外圓半徑 roseType : 'radius',//南丁格爾圖，每個半徑都不一樣 // selectedMode : 'single',//選中的效果,讓選中的圖偏移一小段距離 selectedMode : 'multiple',//多個選中 selectedOffset : 30,//選中的偏移量 }, ], }; myCharts.setOption(option); }, ``` 常規： 圓環： 南丁格爾： :-: