饼图常见效果
显示数值:label、formatter
圆环的设置:radius:['50%','70%'] 设置内外半径不一样
南丁格尔图:roseType: 'radius' 选中效果: 选中模式:selectedMode:single\multiple 选中偏移量:selectedOffset:30<div id="main" style="width: 700px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var pieArr = [{ name: '淘宝', value: 11234 }, { name: '京东', value: 2342 }, { name: '唯品会', value: 8632 }, { name: '聚美优品', value: 1233 }];var option = { series: [{ type: 'pie', data: pieArr, // 饼图文字的显示 label: { show: true, // 决定文字显示的内容 formatter: function (arg) { return arg.name + '平台' + arg.value + '元' + arg.percent + '%' } }, // radius:60, // 饼图半径的设置 // radius: "20%", // 取决于容器的宽度和高度中较小的部分的一半来进行百分比的设置 // 圆环 // radius:['50%',"75%"] // 第0个元素代表内圆的半径,第1个元素代表外圆的半径 roseType: 'radius', // 南丁格尔图(每部分的半径取决于数值的大小) // selectedMode:'single', // 将选中的区域偏移原点一小段距离 selectedMode:'multiple', // 可以选中好几个 selectedOffset:30 // 设置偏离距离 }] };
myChart.setOption(option); </script>
如图: