[email protected]

基础饼图，可自定义饼图文字、颜色等样式。

示例

基础用法(使用options中的series数据)

<template>
  <t-chart-pie-base
    :c-style="{
      wrapper: {
        default: {
          height: '300px',
          width: '500px',
        }
      },
      emptyText: {
        default: {
          color: 'red',
        },
      },
    }"
    :is-show-label-number="true"
    :is-show-label-proportion="true"
    :options="options"
  >
  </t-chart-pie-base>
</template>
<script lang="ts">
import {
  defineComponent, ref, reactive, toRefs,
} from 'vue';
import {
  EChartsOption,
} from '../../../packages/chart-pie-base/src/index.vue';

export default defineComponent({
  setup() {
    const state = reactive({
      options: {
        series: [
          {
            data: [
              { name: '系列1', value: 20 },
              { name: '系列2', value: 30 },
            ],
          },
        ],
      },
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

绑定数据用法(可以动态修改数据)

<template>
  <t-chart-pie-base
    :data="data"
    :name-key="nameKey"
    :data-key="dataKey"
    :series-style="seriesStyle"
    :is-show-label-number="true"
    :is-show-label-proportion="true"
    :c-style="{
      wrapper: {
        default: {
          height: '300px',
          width: '600px',
        }
      }
    }"
    :options="options"
  >
  </t-chart-pie-base>
  <br />
  <el-button
    type="primary"
    @click="handleChangeSeries('push')"
  >
    动态添加数据
  </el-button>
  <el-button
    type="primary"
    @click="handleChangeSeries('pop')"
  >
    动态删除数据
  </el-button>
</template>
<script
 lang="ts">

import {
  defineComponent, ref, reactive, toRefs,
} from 'vue';
import {
  EChartsOption,
} from '../../../packages/chart-pie-base/src/index.vue';

export default defineComponent({
  setup() {
    const state = reactive({
      // 数据
      data: [
        { revenue: 45, name: '二氧化碳', label: '2020' },
        { revenue: 30, name: '臭氧', label: '2021' },
      ],
      // 别名及样式设置
      seriesStyle: {
        itemStyle: {
          borderColor: '#fff',
        },
        label: {
          rich: {
            value: {
              color: 'red',
            },
          },
        },
      },
      nameKey: 'name',
      dataKey: 'revenue',
      options: {
      },
    });

    /**
      * 改变图形系列数据
      * @params value 增加或删除
      */
    const handleChangeSeries = (value) => {
      const index = Math.random();
      if (value === 'push') {
        state.data.push({
          name: `测试数据${index}`,
          revenue: 1,
        });
      } else {
        state.data.pop();
      }
    };

    return {
      ...toRefs(state),
      handleChangeSeries,
    };
  },
});
</script>

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/chart-pie-base
yarn add @ths-base/chart-pie-base

使用

import TChartPieBase from '@ths-base/chart-pie-base';
import '@ths-base/chart-pie-base/lib/index.css';
createApp(App).use(TChartPieBase);

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。 制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TChartPieBase);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ---------------- | ------------ | ------- | ------------- | ------ | ------ | | c-style | 自定义样式 | object | -- | -- | | | data | 数据(数组数据) | array | -- | -- | | | series-style | 饼图系列样式设置（参考echarts官网） | object | -- | -- | | | name-key | 名称别名设置 | string | -- | name | | | data-key | 值别名设置 | string | -- | revenue | | | options | echarts图原生配置 | object | -- | -- | |

c-style 的属性

| 参数 | 允许接收的状态 | 说明 | | ------------------------- | -------------------- | -------------- | | wrapper | default | 容器 |

seriesStyle 属性

饼图的 series 属性配置

作者：吴可菲