『Echarts』绘制饼状图

程序员 NEO

发布于 2025-03-06 15:36:42

10400

代码可运行

文章被收录于专栏：前端必修课前端必修课

运行总次数：0

代码可运行

前言

❝本篇文章是『Echarts』文章的第 6 篇，主要介绍『Echarts』绘制饼状图❞

经过上一篇文章的介绍，给大家详细的介绍了一下『Echarts』当中的弹窗组件与数据标记，那么了解完了弹窗组件与数据标记之后，这篇文章再继续来给大家介绍一下『Echarts』当中的饼状图。

那么饼状图该怎么看呢？我说过通过『Echarts』绘制图形，步骤都是一样的，我们主要就是关注一下『Echarts』的配置文件内容就可以了，所以说我们就在来看一下这个配置文件当中的内容即可。

正文

如果在『Echarts』中绘制饼状图的话 X轴与 Y轴，是不需要了：

let option = {
    ...
    
-   xAxis: {
-       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-   },
-   yAxis: {},
    
    ...
}

如果是绘制饼状图，需要告诉『Echarts』饼状图中有那些数据，所以说数据里面的内容，就需要进行修改和调整。

配置饼状图

首先将对象当中的 name 属性去掉我不需要了：

let option = {
    ...
    
    series: [
        {
-           name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
}

然后将类型(type)改为 pie，意思就是改为饼状图：

let option = {
    ...
    
    series: [
        {
-           type: 'bar',
+           type: 'pie',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
}

type 改完了，data 也需要更改，data 还是接收一个数组，只不过这次数组中的传递的都是对象，对象的属性分别是 value，name：

let option = {
    ...
    
    series: [
        {
            type: 'pie',
-           data: [5, 20, 36, 10, 10, 20]
+           data: [
+               {value: 335, name: '销量'},
+               {value: 310, name: '产量'},
+               {value: 234, name: '容量'}
+           ]
        }
    ]
}

这个时候『Echarts』就会根据这个 data 数据来绘制饼状图了。

到这还没完，前面我说过，图例当中的名称必须与数据当中的名称一一对应，通过观察我的代码我的图例中只有销量，产量，少了容量，所以我需要在 legend 中添加一个容量：

let option = {
    ...
    
    legend: {
        data: ['销量', '产量', '容量']
    },
    
    series: [
        {
            type: 'pie',
            data: [
                {value: 335, name: '销量'},
                {value: 310, name: '产量'},
                {value: 234, name: '容量'}
            ]
        }
    ]
}

到这里，饼状图的配置就完成了，简单的来验证一下再浏览器中打开看一下效果：

从截图中可以看到，饼状图已经绘制出来了，有三条数据，分别是销量、产量、容量，这三条数据是按照我在配置文件中设置来绘制的。

没问题了之后还没完，我发现这个饼状图在绘制好之后有默认的半径，这个半径呢我们是可以进行修改的。

修改半径

这个饼状图在绘制的时候是有自带的默认的位置，默认的就是水平垂直居中的，这个位置我们也是可以修改的，说到这就先来修改一下饼状图的半径，更改方式非常的简单，在 series 的数据当中，添加一个新的属性 radius，我给他取值为 20px：

let option = {
    ...
    
    series: [
        {
            type: 'pie',
+           radius: '20px',
            data: [
                {value: 335, name: '销量'},
                {value: 310, name: '产量'},
                {value: 234, name: '容量'}
            ]
        }
    ]
}

这个时候再来看一下效果，打开浏览器看一下：

可以看到已经发生了改变，已经生效了，那么除了可以用 px 以外还可以使用百分比的方式来进行设置，比如说我又更改为 百分之三十：

let option = {
    ...
    
    series: [
        {
            type: 'pie',
-           radius: '20px',
+           radius: '30%',
            data: [
                {value: 335, name: '销量'},
                {value: 310, name: '产量'},
                {value: 234, name: '容量'}
            ]
        }
    ]
}

再来看一下效果：

好了到此这个就是修改饼状图的半径，那么除了半径我是不是说过，还可以移位置。

移动位置

更改位置其实也非常的简单，同样的在 series 的数据当中，有一个 center 属性，这个属性是用来设置饼状图的位置的，这个属性接收一个数组，数组的第一个值是 x轴，第二个值是 y轴，这个值是百分比的形式，比如说我设置为 ['30%', '50%']：

let option = {
    ...
    
    series: [
        {
            type: 'pie',
            radius: '30%',
+           center: ['30%', '50%'],
            data: [
                {value: 335, name: '销量'},
                {value: 310, name: '产量'},
                {value: 234, name: '容量'}
            ]
        }
    ]
}

看一下效果：