Pie 饼状图

饼状图是一种将数据以扇形形式展示在圆形图表中的可视化方式，用于显示各部分占整体的比例关系。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基础饼图

通过在 [series] 中添加对象并设置数据，可以绘制基础饼图。

<template>
  <view>
    <ly-charts-pie :option="chartOption" height="400"></ly-charts-pie>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    series: [{
      name: '访问来源',
      type: 'pie',
      data: [
        { name: '分类一', value: 30 },
        { name: '分类二', value: 25 },
        { name: '分类三', value: 20 },
        { name: '分类四', value: 15 },
        { name: '分类五', value: 10 }
      ]
    }],
    legend: {
      show: true,
      bottom: 20
    }
  })
</script>

环形饼图

通过设置 [series] 中的 [radius] 属性为数组形式，可以实现环形饼图。

<template>
  <view>
    <ly-charts-pie :option="chartOption" height="400"></ly-charts-pie>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    series: [{
      name: '访问来源',
      type: 'pie',
      radius: ['50%', '65%'],
      data: [
        { name: '分类一', value: 30 },
        { name: '分类二', value: 25 },
        { name: '分类三', value: 20 },
        { name: '分类四', value: 15 },
        { name: '分类五', value: 10 }
      ]
    }],
    legend: {
      show: true,
      bottom: 20
    }
  })
</script>

自定义样式

通过设置 [series] 中的 [itemStyle] 属性，可以自定义饼图扇形样式。

<template>
  <view>
    <ly-charts-pie :option="chartOption" height="400"></ly-charts-pie>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '自定义样式饼图',
      left: 'center'
    },
    series: [{
      name: '销售数据',
      type: 'pie',
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      data: [
        { name: '产品A', value: 30, itemStyle: { color: '#ff6b6b' } },
        { name: '产品B', value: 25, itemStyle: { color: '#4ecdc4' } },
        { name: '产品C', value: 20, itemStyle: { color: '#45b7d1' } },
        { name: '产品D', value: 15, itemStyle: { color: '#f9ca24' } },
        { name: '产品E', value: 10, itemStyle: { color: '#6c5ce7' } }
      ]
    }],
    legend: {
      show: true,
      bottom: 20
    }
  })
</script>

Props

参数	说明	类型	默认值	可选值
option	图表配置项，格式与 ECharts 相似	Object	-	-
width	图表容器宽度	String | Number	100%	-
height	图表容器高度	String | Number	300	-

Events

事件名	说明	回调参数
click	点击扇形区域时触发	{ name, value, dataIndex, data, event }

Option 属性

属性名	说明	类型	默认值
title	标题配置	Object	-
title.text	标题文本	String	-
title.subtext	副标题文本	String	-
title.left	标题水平位置	String	center
legend	图例配置	Object	-
legend.show	是否显示图例	Boolean	true
legend.bottom	图例底部距离	Number	20
series	系列列表	Array	-
series[].type	系列类型	String	pie
series[].name	系列名称	String	-
series[].data	系列数据	Array	-
series[].data[].name	数据项名称	String	-
series[].data[].value	数据项值	Number	-
series[].radius	饼图半径	String | Array	65%
series[].itemStyle	扇形样式	Object	-
series[].itemStyle.borderRadius	扇形圆角	Number	0
series[].itemStyle.borderColor	边框颜色	String	#fff
series[].itemStyle.borderWidth	边框宽度	Number	2

方法

方法名	说明	参数
updateData	更新图表数据	data
getChartInstance	获取图表实例	-