当前位置：首页 > news >正文

ECharts-饼图

news 来源：原创 2025/5/20 5:41:59

样式设置

半径

饼图的半径可以通过 series.radius 设置

option = {series: [{type: 'pie',data: [{value: 335,name: '直接访问'},{value: 234,name: '联盟广告'},{value: 1548,name: '搜索引擎'}],radius: '50%'}]
};

数据和为0不显示

在默认情况下，如果数据值和为 0，会显示平均分割的扇形。

如果我们希望在这种情况下不显示任何扇形，可以将 series.stillShowZeroSum 设为 false。

option = {series: [{type: 'pie',stillShowZeroSum: false,data: [{value: 0,name: '直接访问'},{value: 0,name: '联盟广告'},{value: 0,name: '搜索引擎'}]}]
};

基础饼图

饼图的配置和折线、柱状图不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。

option = {series: [{type: 'pie',data: [{value: 335,name: '直接访问'},{value: 234,name: '联盟广告'},{value: 1548,name: '搜索引擎'}]}]
};

圆环图

饼图的半径除了可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组

当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图

option = {title: {text: '圆环图的例子',left: 'center',top: 'center'},series: [{type: 'pie',data: [{value: 335,name: 'A'},{value: 234,name: 'B'},{value: 1548,name: 'C'}],radius: ['40%', '70%']}]
};

在圆环图中显示高亮扇形对应的文字

利用系列的 label（默认用扇形颜色显示数据的 name），显示在圆环图中间。

option = {legend: {orient: 'vertical',x: 'left',data: ['A', 'B', 'C', 'D', 'E']},series: [{type: 'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},emphasis: {label: {show: true,fontSize: '30',fontWeight: 'bold'}},data: [{ value: 335, name: 'A' },{ value: 310, name: 'B' },{ value: 234, name: 'C' },{ value: 135, name: 'D' },{ value: 1548, name: 'E' }]}]
};

南丁格尔图（玫瑰图）

ECharts 可以通过将饼图的 series.roseType 值设为 'area' 实现南丁格尔图，其他配置项和饼图是相同的。

option = {series: [{type: 'pie',data: [{value: 100,name: 'A'},{value: 200,name: 'B'},{value: 300,name: 'C'},{value: 400,name: 'D'},{value: 500,name: 'E'}],roseType: 'area'}]
};