一、选取合适的数据
环形图适合用来展示不同数据之间的占比关系，因此选取的数据应当符合这个特点。比如，我们可以用环形图展示某个公司不同部门的利润占比，或者某款产品不同销售地区的市场份额。
举个例子，我们现在有一个小型的外卖平台，想要用环形图展示不同餐饮品类的销售量占比。我们先根据销售数据计算出每个品类的销售量，并把这些数据汇总成一个对象数组：
var data = [
{value: 300, name: '中式'},
{value: 200, name: '西式'},
{value: 150, name: '日式'},
{value: 100, name: '韩式'},
{value: 50, name: '其他'}
];
这个数组中，每个对象都包含两个属性：value表示销售量，name表示品类名称。
二、设置图表属性
在使用Echarts绘制环形图之前，我们需要设置一些基础属性。例如，我们可以设置图表的标题和数据源：
var option = {
title: {
text: '餐饮品类销售量占比',
subtext: '2021年1月-6月'
},
series: [{
name: '销售量',
type: 'pie',
data: data
}]
};
上述代码中，我们通过title属性设置了图表的标题和副标题，通过series属性设置了数据和图表类型。这里我们选择使用pie类型绘制环形图。
三、设置环形图样式
除了基础属性之外，我们还可以通过style属性设置图表的样式。在环形图中，我们可以调整环的内外半径、中心位置、颜色等属性来实现不同的效果。
例如，我们可以将内半径设为50%，外半径设为70%，让环形图看起来更加立体：
series: [{
name: '销售量',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '50%'],
data: data
}]
我们还可以调整扇形之间的间距和弧度，让图表更加美观。例如，我们可以将间距设为5%，将第一块扇形的起始角度设为90度：
series: [{
name: '销售量',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
color: '#000'
},
data: data.sort(function(a, b) {
return a.value - b.value;
}),
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
四、完整示例代码
以下是一个完整的使用Echarts创建令人惊叹的环形图的示例代码：
餐饮品类销售量占比 原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/288513.html
微信扫一扫 
支付宝扫一扫 