饼图演示

饼图演示https://yundie.xyz/x-charts-demo/index.html?type=pie

参考配置

基础饼状图

<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'pie',
  animation: true,
  dataLabel: true,
  series: [{
    name: '销量',
    data: [
      { value: 35, name: '产品A', color: '#2979ff' },
      { value: 20, name: '产品B', color: '#19be6b' },
      { value: 25, name: '产品C', color: '#ff9800' },
      { value: 20, name: '产品D', color: '#f44336' }
    ]
  }]
});
</script>

环形饼状图

<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'pie',
  animation: true,
  dataLabel: true,
  extra: {
    pie: {
      ringWidth: 50
    }
  },
  series: [{
    name: '销量',
    data: [
      { value: 35, name: '产品A', color: '#2979ff' },
      { value: 20, name: '产品B', color: '#19be6b' },
      { value: 25, name: '产品C', color: '#ff9800' },
      { value: 20, name: '产品D', color: '#f44336' }
    ]
  }]
});
</script>

配置说明

type

图表类型，设置为 'pie' 表示饼状图。

series

数据系列配置：

• name: 系列名称
• data: 数据数组，每个元素包含：
  • value: 数值
  • name: 标签
  • color: 颜色

extra.pie

饼状图扩展配置：

• ringWidth: 环形宽度，设置后显示为环形图

dataLabel

是否显示数据标签。

animation

是否启用动画效果。