zrx-chart

1.基础用法

vue

<template>
    <bar-chart-8 ref="chartRef" v-bind="option"></bar-chart-8>
</template>

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

const chartRef = ref();
// 组合配置项
const option = {
    scale: .5,
    showLegend: false,
    unit: '亿元',
    yAxisData: [
        ['农副食品加工业可比价产值', '酒、饮料和精制茶制造业可比价产值', '纺织服装、服饰业可比价产值', '造纸和纸制品业可比价产值', '化学原料和化学制品制造业可比价产值', '医药制造业可比价产值']
    ],
    seriesData: [
        [54, -89, -86, 65, 54, 53],
        [95, -97, 75, 72, 90, -88]
    ],
    legendData: ['统计金额', '开票金额'],
    beforeSetOption: option => option.yAxis.forEach(yAxis => yAxis.axisLabel.formatter = name => name.replace(/(?<=^(.{6})+)(?!$)/g, '\n'))
};

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

属性

属性名

说明

类型

默认值

参考值

yAxisData

y 轴坐标

Array

[]

[
['农业', '工业', '建筑', '批发', '交通', '住宿', '金融'],
['农', '工', '建', '批', '交', '住', '金']
]

seriesData

数据数组

Array

[]

[
[54, 89, 86, 65, 54, 53, 72, 65, 60],
[95, 97, 75, 72, 90, 88, 54, 77, 98]
]

grid

上下左右边距

Object

({
           top: 84,
           right: 58,
           bottom: 56,
           left: 174
       })

{ top: 84, right: 58, bottom: 56, left: 106 }

legendData

legend 数据

Array

[]

['统计金额', '开票金额']

showCount

最多显示的数量（实际显示数量会根据输入值调整）

Number

dataZoomType

何种方式拖动 inside 内容区域拖动，slider 滑块拖动

String

'inside'

'slider'

dataZoomRight

当 dataZoomType 为 slider 时，拖动区域距离右侧的距离

Number

showLegend

是否显示 legend

Boolean

true

false

legendIcon

legend 图表，支持字符串或数组

String, Array

['rect']

color

图表项颜色

Array

['#0055FF', '#1FC49D']

['blue', 'grey']

tooltipTitle

tooltip 标题

Array

null

['标题']

yAxisHighlightArea

高亮区域的索引

Array

[]

[2, 4]

highlightAreaColor

高亮区域颜色

String

'rgba(14, 143, 255, 0.2)'

'rgba(255, 143, 255, 0.2)'

unit

数据的单位

String

'元'

barWidth

柱子的宽度

Number

showSplitLine

是否显示辅助刻度线

Boolean

true

false

showItemBackground

是否显示每一项的背景色

Boolean

true

false

itemBackgroundColor

每一项的背景色

String

'rgba(0, 0, 0, 0.05)'

'rgba(255, 0, 0, 0.12)'

showSeriesLabel

是否显示柱子对应的数值

Boolean

true

false

barBorderRadius

圆柱的圆角

Number, Array

[0]

[4, 4, 0, 0]

zoomLock

是否锁定选择区域的大小

Boolean

false

true

scale

图表缩放比例

Number

tooltipConfine

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

Boolean

true

false

beforeSetOption

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

Function

null

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

afterSetOption

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

Function

null

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

1.基础用法 ​

属性 ​

1.基础用法

属性