[email protected]

甜甜圈饼图，可自定义各级环形样式，列表名支持常见污染物上下标转换显示，开放echarts原生options。

示例

基础用法

<template>
  <t-chart-pie-doughnut-data
    :data="chartData"
    :alias="{ value: 'num' }"
    unit="（g/L）"
    :options="chartOptions"
    title="示例标题"
    :c-style="{
      wrapper: {
        default: {
          width: '600px',
          height: '300px'
        }
      }
    }"
  >
  </t-chart-pie-doughnut-data>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
  DataValueArray,
  EChartsOption,
} from '../../../packages/chart-pie-doughnut-data/src/index.vue';

export default defineComponent({
  setup() {
    // 饼图数据
    const chartData: DataValueArray = ref([]);
    // 原生配置
    const chartOptions: EChartsOption = {};

    setTimeout(() => {
      chartData.value = [
        { num: 50, name: '臭氧' },
        { num: 50, name: 'PM10' },
        { num: 50, name: 'PM25' },
        { num: 50, name: 'SO2' },
        { num: 50, name: 'CO' },
        { num: 50, name: 'NOX' },
      ];
    }, 2000);

    return {
      chartData,
      chartOptions,
    };
  },
});
</script>

基础用法 - 深色主题

安装

npm 安装

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

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

使用

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

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(TChartPieDoughnutData);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必填 | | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ---- | | data | 饼图数据 | { name: string, value: number}[] | -- | | 是 | | alias | 饼图数据别名 | object | -| | 是 | | width | 图形宽度 | string | -- | 100% | 否 | | height | 图形高度 | string | -- | 300px | 否 | | title | 图形命名 | string [] | -- | '' | 否 | | colors | 图像颜色，会分别赋予每个数据。 用16进制表示，例如 #00FF00 | string [] | -- | 内置颜色组(目前UI暂时提供了6个颜色) | 否 | | radius | 饼图半径 | string [] | -- | ['45%', '70%'] | 否 | | separation | 饼图数据间分隔width表示间隔大小占数据总和的比例可以写成数字或者%形式: width:10 = width:'10%'，注：原color属性已废除（1.0.6+） | { width: number } | -- | { width: '2%' } | | | unit | 数据单位 | string | -- | '' | 否 | | shadow-radius | 外部阴影半径 | string [] | -- | ['43.5%', '85%'] | 否 | | shodow-style | 外部阴影样式 | {color, opacity} | -- | -- | | | show-inner | 显示默认中心注：不满足于默认中心，可以隐藏默认中心，使用插槽。插槽位于全图中心位置。 | boolean | -- | true | 否 | | show-list | 显示数据列表 | boolean | -- | true | 否 | | list-style | 数据列表排列方式align：列表位置value: 显示数据col：列数（仅左右布局有效） | { align: string, value: boolean, col: number, fontSize: 14, iconSize: 14} | align: 'right'/'bottom'/'left'/'top' | { align: 'right', value: true, fontSize: 14, iconSize: 14, col: 2} | 否 | | c-style | 自定义样式 | object | -- | {} | 否 | | options | echarts配置，本属性为开放式配置，可通过该配置覆盖组件内部配置（不要试图修改含数据配置，这可能会导致组件无法正常运行）不支持： series, legend, tooltipoptions.series样式可通过以下方式设置：options.dataSeries 数据环options.outerSeries 外环options.innerSeries 内环options.centerSeries 中心圆 | object | -- | -- | 否 | |inner-text | 中心文字 | string | - | - | 否 |

c-style 属性

| 参数 | 说明 | | ----------- | ----------------- | | root | 根节点style | | chart | 图像节点style | | legendRoot | 图例根节点style | | legendRow | 图例行容器style | | legendItem | 图例每项style | | legendIcon | 图例图标容器style | | legendName | 图例名称容器style | | legendValue | 图例值容器style |

事件

| 事件名称 | 说明 | 回调参数 | | ---- | ---- | ---- | | legend-click | 点击图例事件 | { current, currentIndex, all } |

作者：喻双