您现在的位置是：亿华云 > IT科技

手把手教你用ECharts画饼图和环形图

亿华云2025-10-08 21:05:04【IT科技】1人已围观

简介本文转载自微信公众号「大数据DT」，作者王大伟。转载本文请联系大数据DT公众号。下面制作一幅基础的饼图，将Echarts中series的type参数值设置为pie，如图4-14所示。代码如下：opt

本文转载自微信公众号「大数据DT」，手把手教作者王大伟。画饼环形转载本文请联系大数据DT公众号。图和图

下面制作一幅基础的手把手教饼图，将Echarts中series的画饼环形type参数值设置为pie，如图4-14所示。图和图

代码如下：

option = { title: { text: 各商品销量占比,手把手教 subtext: A商场情况分析, left: center }, tooltip: { trigger: item, formatter: { a} <br/>{ b} : { c} ({ d}%) }, legend: { orient: vertical, left: left, data: [A商品, B商品, C商品, D商品, E商品] }, series: [ { name: 所售商品, type: pie, data: [ { value: 343, name: A商品}, { value: 250, name: B商品}, { value: 509, name: C商品}, { value: 108, name: D商品}, { value: 948, name: E商品} ], } ] };

▲图4-14 饼图

在上述代码中，将legend设置为vertical，画饼环形是图和图为了避免水平显示后会与标题重叠。这里将tooltip的手把手教显示格式设置为：formatter: { a}

{ b} : { c} ({ d}%)，各参数在饼图中的画饼环形具体含义为：{ a}(系列名称)，{ b}(数据项名称)，图和图{ c}(数值)，手把手教{ d}(百分比)。画饼环形当鼠标悬停在某块饼上时，图和图该块饼会突出显示且按照formatter的云服务器提供商格式显示文字和数值。

需要注意的是，当我们点击饼图的legend时，如点击C商品的legend时，C商品的图例会变为灰色，同时，饼图中将不再显示C商品饼块，且会重新计算百分比，如图4-15所示。

▲图4-15 饼图显示控制

除了基本的饼图，我们也常常会用到环形图。在ECharts中，在series中加上radius参数即可绘制环形图，例如下面代码中的源码库radius: [50%, 70%]，代表环内部半径和外部半径的比例分别为50%、70%。

option = { title: { text: 各商品销量占比, subtext: A商场情况分析, left: center }, tooltip: { trigger: item, formatter: { a} <br/>{ b} : { c} ({ d}%) }, legend: { orient: vertical, left: left, data: [A商品, B商品, C商品, D商品, E商品] }, series: [ { name: 所售商品, type: pie, radius: [50%, 70%], data: [ { value: 343, name: A商品}, { value: 250, name: B商品}, { value: 509, name: C商品}, { value: 108, name: D商品}, { value: 948, name: E商品} ], } ] };

环形图可视化结果如图4-16所示。