zrx-chart

1.基础用法(画像app)

vue

<template>
    <ring-chart-7 ref="chartRef" v-bind="chartOption"></ring-chart-7>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();
// 组合配置项
const chartOption = {
    unit: '个',
    title: '累计知识产权数',
    centerDisplay: 'sum',
    seriesData: [
        { value: 1048, name: '专利' },
        { value: 735, name: '作品著作权' },
        { value: 580, name: '软件著作权' },
        { value: 484, name: '网站' },
        { value: 484, name: '资质证书' },
        { value: 484, name: '商标' }
    ]
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 340px;
    background-color: white;
}
</style>

属性

属性名

说明

类型

默认值

参考值

title

标题

String

'标题'

radius

半径

Array

[68, 80]

[60, 70]

itemGap

间距

Number

backgroundRadius

底色圆环半径

Array

[61, 65]

[50, 70]

backgroundColor

底色

String, Object

({ type: 'linear', x: 1, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#E9EEF4' }, { offset: 0.5, color: '#FFFFFF' }, { offset: 1, color: '#E9EEF4' } ] })

'green'

color

预设颜色

Array

['rgb(0, 85, 255)', 'rgb(181, 191, 226)', 'rgb(43, 195, 255)', 'rgb(31, 110, 138)', 'rgb(114, 221, 224)', 'rgb(184, 222, 255)']

['#405FFE', '#1BBE8C', '#48CBA3', '#A4E5D1', '#ECEFFE']

seriesData

数据项

Array

[]

[
    { value: 1048, name: '正常' },
    { value: 735, name: '故障' },
    { value: 580, name: '告警' },
    { value: 484, name: '离线' }
]

unit

单位

String

'个'

scaleSize

悬浮选中单项时，增加的半径

Number

clockwise

饼图的扇区是否是顺时针排布

Boolean

false

true

centerDisplay

中心部分的展示部分
null，'' 或者不传，表示中心部分不显示
'item' 表示中心部分展示单项
'sum' 表示中心部分展示总量
'itemValue' 表示中心部分展示值
'itemPercentage' 表示中心部分展示单项占比

String

null

'item'

tooltipConfine

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

Boolean

true

false

scale

图表缩放比例

Number

beforeSetOption

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

Function

null

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

afterSetOption

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

Function

null

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

1.基础用法(画像app) ​

属性 ​

1.基础用法(画像app)

属性