2、DevExtreme 饼状图组件

1、创建

创建vue文件，引入dev基本组件

import DxPieChart, {
  DxLegend,
  DxSeries,
  DxLabel,
  DxConnector,
  DxFont,
} from 'devextreme-vue/pie-chart'

源码

<!--
 * @Descripttion: 饼状图组件
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-11-07 14:29:44
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-11-07 14:32:14
-->
<template>
  <div class="BasePieChart">
    <!-- palette 饼状图颜色 -->
    <DxPieChart
      id="pie"
      :data-source="pieData"
      palette="Pastel"
      :title="pieConfig.title"
    >
      <DxSeries
        :argument-field="pieConfig.argumentFieId"
        :value-field="pieConfig.valueFieId"
      >
        <DxLabel
          :visible="true"
          position="columns"
          :customize-text="formatLabel"
        >
          <DxConnector :visible="true" :width="1" format="percent" />
          <DxFont :size="pieConfig.size" />
        </DxLabel>
      </DxSeries>
      <DxLegend
        :column-count="6"
        orientation="horizontal"
        item-text-position="right"
        horizontal-alignment="center"
        vertical-alignment="bottom"
      />
    </DxPieChart>
  </div>
</template>

<script>
import DxPieChart, {
  DxLegend,
  DxSeries,
  DxLabel,
  DxConnector,
  DxFont,
} from 'devextreme-vue/pie-chart'
export default {
  name: 'BasePieChart',
  components: {
    DxPieChart,
    DxSeries,
    DxLabel,
    DxConnector,
    DxLegend,
    DxFont,
  },
  props: {
    // 饼状图数据源
    pieData: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 饼状图配置
    pieConfig: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  methods: {
    formatLabel(pointInfo) {
      let label = ''
      // 1 名称+值+百分比
      // 2 值+百分比
      // 默认 值
      if (this.pieConfig.labelType === '1') {
        label =
          pointInfo.argument +
          ' ' +
          '(' +
          pointInfo.valueText +
          ')' +
          ' ' +
          pointInfo.percentText
      } else if (this.pieConfig.labelType === '2') {
        label = pointInfo.valueText + pointInfo.percentText
      } else {
        label = pointInfo.valueText
      }
      return label
    },
  },
}
</script>

<style></style>

2、使用组件

<!--
 * @Descripttion: 饼状图
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-11-07 14:28:15
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-11-07 14:36:02
-->
v
<template>
  <div class="PieChart">
    <base-pie-chart
      :pieData="pieAllData"
      :pieConfig="pieConfig"
    ></base-pie-chart>
  </div>
</template>

<script>
import BasePieChart from '@/components/BasePieChart'
export default {
  name: 'PieChart',
  components: {
    BasePieChart,
  },
  data() {
    return {
      // 饼状图数据
      pieAllData: [
        {
          label: 'A',
          number: '10',
        },
        {
          label: 'B',
          number: '15',
        },
        {
          label: 'C',
          number: '20',
        },
      ],
      // 饼状图配置
      pieConfig: {
        title: '合格率', // 标题名称
        argumentFieId: 'label', // 显示图列字段
        valueFieId: 'number', // 图表显示字段
        labelType: '1', // 默认null 值 显示值类型 1、名称+值+百分比  2 值+百分比
        size: 16, // 显示提示文字大小，类型 Number
      },
    }
  },
}
</script>

<style></style>

3、示例