• 如何用echarts画一个好看的饼图


    前言

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

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

    1. 先用echarts画一个饼图

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

    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)'
            }
          }
        }
      ]
    };
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

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

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

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

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

    2.1 title

    title

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

      注意: 还可以用 leftrighttopbottom 四个属性来精确设置 title 的位置,效果可参考 position 中的 leftrighttopbottom

    • backgroundColor 标题背景色
    • borderWidth 标题边框线宽
    • borderColor 标题边框颜色
      必须先设置了 backgroundColor ,border 属性才会生效
    • padding
    • itemGap 主副标题纵向间隔,只能填数字
    • textStyle 主标题文本样式
      • fontFamily
      • fontSize
      • fontStyle
      • fontWeight
      • color
      • lineHeight
      • textBorderColor 字体描边颜色
      • textBorderWidth 字体描边宽度,只填数字
      • textShadowColor 阴影颜色
      • textShadowBlur 阴影长度
      • textShadowOffsetX 阴影水平偏移
      • textShadowOffsetY 阴影垂直偏移
    • subtextStyle 副标题文本样式
      主标题与副标题的样式属性都一样,就不多做赘述

    案例

      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,
        }
      },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    2.2 legend

    属性详解

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

    legend

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

      注意: 还可以用 leftrighttopbottom 四个属性来精确设置 title 的位置,效果可参考 position 中的 leftrighttopbottom

    • 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 指定不显示在饼图中的数据

    案例

      legend: {
        orient: 'vertical',
        // left: 33,
        x: 'right',
        y: 'center',
        itemGap: 20,
        icon: 'circle',
        align: 'left',
        selected: {
              'Direct': false,
              'Email': false
        }
      },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    legend 中的 formatter

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

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

    	// name 对应的是 series.data 中的 name 属性
        formatter: function (name) {
          return name + '   ○';
        }
    
    • 1
    • 2
    • 3
    • 4

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

    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 边框颜色

      使用默认的边框样式,它会根据饼图颜色来绘制边框

    • formatterlegend 中的 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

    案例

      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)'
            },
        }
      ]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    3. formatter 语法

    看这篇文章:https://blog.csdn.net/qq_39442804/article/details/78202256 写得巨好

  • 相关阅读:
    缓存之缓存简介
    既不是研发顶尖高手,也不是销售大牛,为何偏偏获得 2 万 RMB 的首个涛思文化奖?
    Linux综合技巧
    ESP32-IPS彩屏ST7789-Arduino-简单驱动
    Codeforces Round #833 (Div. 2) D. ConstructOR(构造 逆元/exgcd)
    域渗透学习
    SQL查询语句之查询数据
    Python基础——分支与循环
    Java Stream流的详解
    Flutter的强制自我审查
  • 原文地址:https://blog.csdn.net/m0_54355172/article/details/132778783