## :-: 饼状图：可以快速了解不同分类占比情况（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); }, ``` 常规： 圆环： 南丁格尔： :-: