echarts饼图设置环的大小

六月初六月初 Echarts 2019-02-21 18:13:07

echarts饼图中对圆环的大小比列设置：

主要代码：

radius: ['80%', '40%']

参数解释：

第一个参数：外环的尺寸大小

第二个参数：内环尺寸大小

注：用百分比设置

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
    </head>
    <body>
        <div id="test" style="height: 500px;width: 100%;">
            
        </div>
        <script>
            var BarBOX1 = echarts.init(document.getElementById("test"));
            option1 = {
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}: {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
				},
				series: [
					{
						name:'访问来源',
						type:'pie',
						radius: ['80%', '40%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: true,
								textStyle: {
									fontSize: '30',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data:[
							{value:335, name:'直接访问'},
							{value:310, name:'邮件营销'},
							{value:234, name:'联盟广告'},
							{value:135, name:'视频广告'},
							{value:1548, name:'搜索引擎'}
						]
					}
				]
			};

            BarBOX1.setOption(option1);
        </script>
    </body>
</html>

效果图这里就不放了，大家可以复制代码运行查看效果！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！