前言

最近有个需求，需要绘制一个饼图，为此我根据这次需求来整理了一下关于 echarts 饼图绘制的一些知识点，在这次需求中我需要用到的属性我会详细讲解，其他的属性我会粗略地说一下（并加入其他博主的文章的跳转），综合案例在后续博客中更新。

注意： 有些属性只有新版示例中才有，老版本的无法生效，如：borderRadius 。

echarts_10">1. 先用echarts画一个饼图

直接在官网找一个最基础的饼图案例：

javascript">option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

然后你就得到了一个这样的最基础的饼图：

2. 分析一下饼图的结构及其属性值

接下来我们就可以来分析一下这个饼图的构造了，这样我们后续才好优化，其主要结构如下图：

那么就根据上图来说明一下饼图的属性值了，从最简单的 title 开始：

2.1 title

title

show 是否显示标题，默认为true
text 主标题
subtext 副标题
x 水平位置，可选值 left、right、center
y 垂直位置，可选值 top、center、bottom

注意： 还可以用 left、right、top、bottom 四个属性来精确设置 title 的位置，效果可参考 position 中的 left、right、top、bottom 。
backgroundColor 标题背景色
borderWidth 标题边框线宽
borderColor 标题边框颜色
必须先设置了 backgroundColor ，border 属性才会生效
padding
itemGap 主副标题纵向间隔，只能填数字
textStyle 主标题文本样式
- fontFamily
- fontSize
- fontStyle
- fontWeight
- color
- lineHeight
- textBorderColor 字体描边颜色
- textBorderWidth 字体描边宽度，只填数字
- textShadowColor 阴影颜色
- textShadowBlur 阴影长度
- textShadowOffsetX 阴影水平偏移
- textShadowOffsetY 阴影垂直偏移
subtextStyle 副标题文本样式
主标题与副标题的样式属性都一样，就不多做赘述

案例

javascript">  title: {
    text: '一个饼图',
    subtext: '不断优化中',
    x: 'center',
    y: 'top',
    itemGap: 13,
    textStyle: {
      fontFamily: "华文隶书",
      fontSize: 28,
      fontStyle: "italic",
      textBorderColor: "#01deff",
      textBorderWidth: 2,
      textShadowColor: "#d7f8fc",
      textShadowBlur: 3,
      textShadowOffsetX: 5,
      textShadowOffsetY: 5
    },
    subtextStyle: {
      fontSize: 18,
       fontFamily: "华文隶书",
       fontStyle: "italic",
      textBorderColor: "#01deff",
      textBorderWidth: 2,
    }
  },

2.2 legend

属性详解

这个就是左边那几个标识了，其由两部分组成，如下：

legend

orient 图例的排列，vertical 垂直、horizontal 水平
x 水平位置，水平位置，可选值 left、right、center
y 垂直位置，可选值 top、center、bottom

注意： 还可以用 left、right、top、bottom 四个属性来精确设置 title 的位置，效果可参考 position 中的 left、right、top、bottom 。
backgroundColor 背景颜色
borderColor 边框颜色
borderWidth 边框宽度
padding
itemGap 图例之间的间距，只填数字
icon 图标类型：
- circle 圆形
- rect 矩形
- roundRect 圆角矩形（默认）
- triangle 三角形
- diamond 菱形
- pin 地图标记图标
- arrow 箭头
- none 无图标
itemHeight 控制 icon 高度
itemWidth 控制 icon 宽度
align 调整 icon 相对于文本的位置（left——icon在文本左边、right、auto）
textStyle 设置文本样式，参考 title 章节的文本样式
selected 指定不显示在饼图中的数据

案例

javascript">  legend: {
    orient: 'vertical',
    // left: 33,
    x: 'right',
    y: 'center',
    itemGap: 20,
    icon: 'circle',
    align: 'left',
    selected: {
          'Direct': false,
          'Email': false
    }
  },

legend 中的 formatter

formatter 可以自定义每个图例的文本内容，可用在 tooltip、legend、label 中，不过一般是用在 legend 中。

现在我有一个需求，我要让 legend 的文本的后面都加上一个 ○，如下：

javascript">	// name 对应的是 series.data 中的 name 属性
    formatter: function (name) {
      return name + '   ○';
    }

更详细的使用请见后续的综合案例。

2.4 label

label

show 是否显示，默认为 true
backgroundColor 背景颜色
borderColor 边框颜色
borderWidth 边框宽度
borderRadius 边框圆角
padding 内边距
…

因为这次需求中不需要管 label 长啥样，我直接 show: false 了，也就没去研究了，其余的属性可以见以下两篇博客：

https://www.hangge.com/blog/cache/detail_3130.html

https://blog.csdn.net/qq_38718629/article/details/126892957

2.5 tooltip

tooltip

show 是否显示，默认 true
trigger 触发类型
- item 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
- axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
- none 不触发
axisPointer 轴指针属性，trigger: ‘axis’ 时使用，这里不做赘述
showContent 是否显示提示框浮层，默认 true
alwaysShowContent 是否永远显示提示框内容，默认（false）情况下在移出可触发提示框区域后一定时间后隐藏
triggerOn 提示框触发的条件
- mousemove 鼠标悬浮时触发（默认）
- click 鼠标点击时触发
- mousemove|click 移动或点击时触发
- none 无法触发
confine 是否将 tooltip 框限制在图表的区域内，默认 false
backgroundColor 背景色
padding
textStyle 设置文本样式，参考 title 章节的文本样式
borderWidth 边框宽度
borderColor 边框颜色

使用默认的边框样式，它会根据饼图颜色来绘制边框
formatter 见 legend 中的 formatter

2.6 series

这个是可操作属性最多的组成部分了，其属性值也是最多的。

series

name tooltip 的标题文字
type 图标类型，如：pie、category、line
roseType 将普通饼图转换成南丁格尔图
- radius 扇区圆心角展现数据的百分比，半径展现数据的大小
- area 扇区圆心角的半径展现数据的大小（从大到小顺时针渲染）
- none 普通饼图（默认）
radius 饼图大小，可用 px、%
注意：
- 如果只有一个属性值，则是实心饼图，属性值为饼图大小
- 如果有两个属性值，如：['60%', '70%']，第一个值表示内圈大小，第二个表示外圈大小
center 饼图圆心所在位置，可用 px、%，如：['40%', '50%']
avoidLabelOverlap 是否避免标签重叠，默认为 false
color 饼图扇叶颜色，与 data 中的数据匹配
data 饼图渲染数据
emphasis 当鼠标悬浮时，饼图扇叶的变化
- focus 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
  - none 不淡出其它图形（默认）
  - self 只聚焦（不淡出）当前高亮的数据的图形
  - series series
- blurScope 在开启 focus 的时候，可以通过 blurScope 配置淡出的范围
  - coordinateSystem 淡出范围为坐标系（默认）
  - series 淡出范围为系列
  - global 淡出范围为全局
itemStyle 饼图扇叶样式
- shadowColor 阴影颜色
- shadowBlur 阴影长度
- shadowOffsetX 阴影水平偏移
- shadowOffsetY 阴影垂直偏移
- borderRadius 边框圆角
- borderColor 边框颜色
- borderWidth 边框宽度
注意： 可以在 emphasis 设置 itemStyle

案例

javascript">  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '70%'],
      center: ['50%', '50%'],
      roseType: 'area',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      label: {
        show: false
      },
      itemStyle: {
          borderRadius: '10%',
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
    }
  ]