1.特殊定制图表

<template>
    <ring-chart-6 v-bind="chartOption" ref="chartRef"></ring-chart-6>
</template>

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

const chartRef = ref();

const ringSeriesData = [
    { name: '在建', value: 73 },
    { name: '拟建', value: 54 },
    { name: '已建', value: 98 }
];
const barSeriesData = [73, 54];

const chartOption = {
    icons: [
        `https://www.baidu.com/img/flexible/logo/pc/result.png`
    ],
    ringSeriesData,
    barSeriesData
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 256px;
    width: 300px;
    background-color: rgb(3, 43, 68);
}
</style>

2.颜色修改

<template>
    <ring-chart-6 v-bind="chartOption" ref="chartRef"></ring-chart-6>
</template>

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

const chartRef = ref();

const ringColor = ['red', 'green', 'blue'];
const barColor = ['orange', 'pink', 'purple', 'yellowgreen'];
const ringSeriesData = [
    { name: '在建', value: 73 },
    { name: '拟建', value: 54 },
    { name: '已建', value: 98 }
];
const barSeriesData = [73, 54, 23, 66];
const barHeight = 60;
const lineLength = 50;

const chartOption = {
    ringColor,
    barColor,
    ringSeriesData,
    barSeriesData,
    barHeight,
    lineLength
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 256px;
    width: 300px;
    background-color: rgb(3, 43, 68);
}
</style>

属性

属性名

说明

类型

默认值

参考值

radius

半径

Array

[60, 68]

[60, 70]

ringColor

圆环颜色

Array

['#0e8fff', '#00d5ef', '#b5bfe2']

['#0e8fff', '#00d5ef', '#b5bfe2']

barColor

柱子颜色

Array

['#206e8a', '#72dde0']

['#206e8a', '#72dde0']

itemGap

间距

Number

2

4

ringSeriesData

圆环数据

Array

[]

[73, 54, 98]

barSeriesData

柱子数据

Array

[]

[73, 54, 23, 66]

barHeight

柱子的高度

Number

120

160

lineLength

连接线长度

Number

34

20

unit

单位

String

''

'个'

startAngle

起始角度

Number

52

40

scale

图表缩放比例

Number

1

2

tooltipConfine

是否将 tooltip 框限制在图表的区域内

Boolean

true

false

beforeSetOption

万能方法，图表渲染之前执行

Function

null

function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}

afterSetOption

万能方法，图表渲染之后执行

Function

null

function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}

支持方法

方法名

说明

例子

renderChart

渲染图表

chartRef?.value?.renderChart()

clearChart

清除图表

chartRef?.value?.clearChart()