zrx-chart

Appearance

1.基础用法 ​

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

const chartRef = ref();

const yAxisData = ['0-6岁', '7-17岁', '18-35岁', '36-50岁', '51-65岁', '65-89岁', '>80岁'];
const seriesData = [
    [12, 64, 84, 11, 39, 69, 51],
    [87, 29, 80, 66, 49, 21, 23]
];
const legendData = ['男性', '女性'];

const chartOption = {
    yAxisData,
    seriesData,
    legendData
};

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

2.拖动 ​

vue
<template>
    <bar-chart-4 ref="chartRef" v-bind="{ ...chartOption }"></bar-chart-4>
    <bar-chart-4 ref="chartRef2" v-bind="{ ...chartOption, dataZoomType: 'slider' }"></bar-chart-4>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();
const chartRef2 = ref();

const grid = { right: 60, left: 20 };
const yAxisData = ['0-6岁', '7-17岁', '18-35岁', '36-50岁', '51-65岁', '65-89岁', '>80岁'];
const seriesData = [
    [12, 64, 84, 11, 39, 69, 51],
    [87, 29, 80, 66, 49, 21, 23]
];
const legendData = ['男性', '女性'];

const chartOption = {
    grid,
	yAxisData,
    seriesData,
    legendData,
    showCount: 3
};

onMounted(() => {
    chartRef.value.renderChart();
    chartRef2.value.renderChart();
});
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 440px;
    display: inline-block;
    width: 500px;
    background-color: rgb(3, 43, 68);
    margin: 0 32px 0 0;
}
</style>

属性 ​

属性名
说明
类型
默认值
参考值
grid
上下左右边距
Object
({ top: 0, right: 20, bottom: 0, left: 20 })
{ top: 0, right: 0, bottom: 0, left: 0 }
legendData
legend 数据
Array
[]
['男', '女']
seriesData
纵坐标数据
Array
[]
[
    [12, 64, 84, 11, 69, 51],
    [87, 29, 80, 66, 21, 23]
]
yAxisData
纵坐标数据
Array
[]
['0-6岁', '7-17岁', '18-35岁', '36-59岁', '60-79岁', '>80岁']
yAxisWidth
中心部分 y 轴的宽度
Number
72
120
barBorderRadius
圆柱的圆角
Number
4
4
barWidth
圆的宽度
Number
16
24
showValue
是否显示数值
Boolean
true
false
unit
单位
String
''
'人'
showCount
最多显示的数量（实际显示数量会根据输入值调整）
Number
3
3
dataZoomType
何种方式拖动 inside 内容区域拖动，slider 滑块拖动
String
'inside'
'slider'
dataZoomRight
当 dataZoomType 为 slider 时，拖动区域距离右侧的距离
Number
0
12
color
颜色
Array
[
           {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               colorStops: [
                   {
                       offset: 0,
                       color: '#1261c5'
                   },
                   {
                       offset: 1,
                       color: '#3eb1ff'
                   }
               ]
           },
           {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               colorStops: [
                   {
                       offset: 0,
                       color: '#d2f3ff'
                   },
                   {
                       offset: 1,
                       color: '#8bbbf2'
                   }
               ]
           }
       ]
['blue', 'grey']
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 的修改，绑定自定义事件等'
}