zrx-chart

Appearance

1.基础用法 ​

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

const chartRef = ref();

const seriesData = [
    [-12, -64, -84, 11, 69, 51, 46, 76, -69],
    [87, 29, -80, -66, 21, -23, 88, 9, -9]
];
const yAxisData = [
    ['农业', '工业', '建筑业', '批发和零售业', '交通运输', '住宿和餐饮业', '金融业', '房地产业', '其他服务业'],
    ['33%', '29%', '38%', '21%', '11%', '19%', '33%', '29%', '14%']
];
const legendData = ['建筑业总产值', '前20名产值'];
const chartOption = {
    seriesData,
    yAxisData,
    legendData,
    showCount: 3
};

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

2.调整宽度与显示行数 ​

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

const chartRef = ref();

const seriesData = [
    [-12, -64, -84, 11, 69, 51, 46, 76, -69]
];
const yAxisData = [
    ['农业', '工业', '建筑业', '批发和零售业', '交通运输', '住宿和餐饮业', '金融业', '房地产业', '其他服务业'],
    ['33%', '29%', '38%', '21%', '11%', '19%', '33%', '29%', '14%']
];
const legendData = ['建筑业总产值'];
const barWidth = 36;
const showCount = 3;
const showLegend = false;
const dataZoomType = 'slider';

const chartOption = {
    seriesData,
    yAxisData,
    legendData,
    barWidth,
    showCount,
    showLegend,
    dataZoomType
};

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

3.设置高亮区域与颜色 ​

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

const chartRef = ref();

const seriesData = [
    [-12, -64, -84, 11, 69, 51, 46, 76, -69],
    [87, 29, -80, -66, 21, -23, 88, 9, -9]
];
const yAxisData = [
    ['农业', '工业', '建筑业', '批发和零售业', '交通运输', '住宿和餐饮业', '金融业', '房地产业', '其他服务业'],
    ['33%', '29%', '38%', '21%', '11%', '19%', '33%', '29%', '14%']
];
const legendData = ['建筑业总产值', '前20名产值'];
const barWidth = 18;
const yAxisHighlightArea = [2, 4];
const highlightAreaColor = 'rgba(255, 0, 0, 0.2)';

const chartOption = {
    seriesData,
    yAxisData,
    legendData,
    barWidth,
    yAxisHighlightArea,
    highlightAreaColor
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 640px;
    background-color: rgb(3, 43, 68);
}
</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: 106
       })
{ top: 84, right: 58, bottom: 56, left: 106 }
legendData
legend 数据
Array
[]
['统计金额', '开票金额']
showCount
最多显示的数量（实际显示数量会根据输入值调整）
Number
4
4
dataZoomType
何种方式拖动 inside 内容区域拖动，slider 滑块拖动
String
'inside'
'slider'
dataZoomRight
当 dataZoomType 为 slider 时，拖动区域距离右侧的距离
Number
0
12
showLegend
是否显示 legend
Boolean
true
false
tooltipFormatter
自定义 tooltip 的格式，支持模板字符串或函数
Function, String
''
function (...params) {
    return '返回自定义格式'
}
legendIcon
legend 图表，支持字符串或数组
String, Array
['rect']
['rect']
color
图表项颜色
String, Array
['blue', 'grey']
['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
10
24
showSplitLine
是否显示辅助刻度线
Boolean
true
false
itemBackgroundColor
每一项的背景色
String
'rgba(29, 63, 105, 0.12)'
'rgba(255, 0, 0, 0.12)'
showSeriesLabel
是否显示柱子对应的数值
Boolean
false
true
barBorderRadius
圆柱的圆角
Number, Array
[0]
[4, 4, 0, 0]
zoomLock
是否锁定选择区域的大小
Boolean
false
true
tooltipConfine
是否将 tooltip 框限制在图表的区域内
Boolean
true
false
scale
图表缩放比例
Number
1
2
beforeSetOption
万能方法，图表渲染之前执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}
afterSetOption
万能方法，图表渲染之后执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}

支持方法 ​

方法名
说明
例子
renderChart
渲染图表
chartRef?.value?.renderChart()
clearChart
清除图表
chartRef?.value?.clearChart()