【可视化大屏系列】Echarts之饼图绘制

本文为个人近期学习总结，若有错误之处，欢迎指出！

前言

在前文页面布局、DataV 的使用、Echarts 的基础使用的基础上，开始绘制大屏中的饼图。

1.需求

饼图展示公司人员学历占比情况。

2.实现效果

3.大概思路

为简化代码量，将基础饼图封装为组件：
（1）子组件绘制基础饼图，只有一个系列（type值为’pie’）；
（2）父组件向子组件传递数据，数据格式为：

[
  { value: 456, name: '大专' },
  { value: 735, name: '本科' },
  { value: 580, name: '硕士' },
  { value: 58, name: '博士' }
]

4.代码实现

子组件写法

HTML

<template>
  <div class="block" style="height:100%;">
    <dv-border-box-13>
      <div class="title" style="height:25%;">
        学历占比
      </div>
      <div ref="circleArea" :style="{width: '100%',height: '75%'}" />
    </dv-border-box-13>
  </div>
</template>

JavaScript

<script>
export default {
  name: 'circle-pie',
  props: {//子组件接收的数据
    data: {
      type: Array,
      default: () => []
    }
  },
  // eslint-disable-next-line max-lines-per-function
  data () {
    return {
      option: {
        color: [// 扇形的颜色
          '#065aab',
          'rgb(145,204,117)',
          '#0682ab',
          'rgb(238,102,102)'
        ],
        tooltip: {
          trigger: 'item', // 类目触发，axis是坐标轴触发
          formatter: '{a}<br />{b}：{c}<br />占比：{d}%',

          // a:学历情况:series里的name
          // b:本科：series里的data的name
          // c:735：series里的data的value
          // d:echarts自己将值换算的百分数
          backgroundColor: 'rgba(83,164,230,.6)',
          borderColor: 'rgba(83,164,230,1)', // 边框颜色
          textStyle: {// 设置文字样式
            color: 'rgba(255,255,255,1)',
            fontSize: 10
          }
        },
        legend: {// 图例
          orient: 'vertical',
          x: 'right',
          y: 'center',
          left: '80%',// 距离左边为80%
          itemWidth: 10,// 小图标的宽度
          itemHeight: 10,
          textStyle: { // 图例文字的样式
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        series: [
          {
            name: '学历情况',
            type: 'pie',
            center: ['50%', '45%'],// 设置饼形图在容器中的位置
            radius: ['0%', '65%'],// 内圆半径和外圆半径
            avoidLabelOverlap: false,
            label: {// 显示标签文字
              show: true,
              color: 'rgba(255,255,255,.7)',
              formatter: '{d}%'

              // formatter: ' {b}：{c}\n{d}%'
            },
            labelLine: {// 显示连接线(图形和文字之间的线)
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.7)'
              },
              smooth: 0.2,

              // 以下两个指线的长度
              length: 7, // 连接扇形图线长
              length2: 12 // 连接文字线长
            },

            // data: [
            //   { value: 1048, name: '博士' },
            //   { value: 735, name: '硕士' },
            //   { value: 580, name: '本科' },
            //   { value: 484, name: '大专' }
            // ]
            data: this.data
          }
        ]
      }
    }
  },
  mounted () {
    this.drawCircle()
  },
  methods: {
    drawCircle () {
      let myCircle = this.$echarts.init(this.$refs.circleArea)
      myCircle.setOption(this.option, true)
      window.addEventListener('resize', () => {
        myCircle.resize()
      })
    }
  }
}
</script>

CSS与前文“柱图绘制”相同，故这里省略。

父组件写法

HTML

<circle-chart :data="circleData" />

Javascript
引入组件和注册组件的部分代码与前文“柱图绘制”相似，这里写关键代码：

data(){
  return {
    // 圆环饼图传递给子组件的数据
    circleData: [
      { value: 456, name: '大专' },
      { value: 735, name: '本科' },
      { value: 580, name: '硕士' },
      { value: 58, name: '博士' }
    ]
  }
}

5.附加

（1）圆环饼图的绘制

如：要实现空心圆环饼图

要点：修改series中系列的radius属性

// 内圆半径和外圆半径
radius: ['30%', '65%']

（2）南丁格尔玫瑰饼图

需求：将上述圆环饼图改为玫瑰饼图。
要点：修改series中系列的roseType属性

A.半径展示数据的大小

// 饼形图的显示模式:半径模式，半径展示数据的大小
roseType: 'radius'

B.面积展示数据的大小

// 饼形图的显示模式:面积模式，面积展示数据的大小
roseType: 'area'