zrx-chart

Appearance

1.基础用法 ​

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

const chartRef = ref();
const seriesData = [
    {
        yAxisIndex: 0,
        data: [50, 130, 150, 182, 173, 184, 150, 18, 130, 150, 182, 173]
    },
    {
        yAxisIndex: 1,
        data: [52, 94, 61, 11, 52, 68, 58, 94, 61, 11, 52, 68]
    }
];
const xAxisData = ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月', '1-10月', '1-11月', '1-12月'];
const unit = ['万元', '%'];
const yAxisName = ['万元', '%'];
const color = ['#3196FA', '#24AB86'];
const legendData = ['实际值', '当前目标'];

const chartOption = {
    unit,
    color,
    xAxisData,
    yAxisName,
    seriesData,
    legendData
};

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

2.辅助线 ​

辅助线可能位于 y 轴自动计算的最小-最大值区间之外，可通过 beforeSetOption 指定 y 轴最大/最小值控制
vue
<template>
    辅助线可能位于 y 轴自动计算的最小-最大值区间之外，可通过 beforeSetOption 指定 y 轴最大/最小值控制
    <bar-chart-5 ref="chartRef" v-bind="chartOption"></bar-chart-5>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();

const markLine = [
    {
        name: '全年目标',
        unit: '万元',
        value: 220,
        yAxisIndex: 0,
        color: '#FA4B31'
    }
];
const chartOption = {
    markLine,
    yAxisName: ['万元', '%'],
    legendData: ['实际值', '当前目标'],
    seriesData: [
        {
            yAxisIndex: 0,
            data: [52, 94, 61, 11, 52, 68, 58, 94, 61, 11, 52, 68]
        },
        {
            yAxisIndex: 1,
            data: [50, 130, 150, 182, 173, 184, 150, 18, 130, 150, 182, 173]
        }
    ],
    xAxisData: ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月', '1-10月', '1-11月', '1-12月'],
    beforeSetOption: option => (option.yAxis[0].max = Math.max(...option.series[0].data, markLine[0].value))
};

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

属性 ​

属性名
说明
类型
默认值
参考值
xAxisData
x 轴坐标
Array
[]
['农业', '工业', '建筑业', '批发和零售业', '交通运输', '住宿和餐饮业', '金融业', '房地产业', '其他服务业']
seriesData
数据数组
Array
[]
[
    [54, 89, 86, 65, 54, 53, 72, 65, 60],
    [95, 97, 75, 72, 90, 88, 54, 77, 98]
]
legendData
legend 数据
Array
[]
['统计金额', '开票金额']
yAxisName
y轴单位
String, Array
['']
['亿元', '%']
showLegend
是否显示 legend
Boolean
true
false
color
图表项颜色
String, Array
['#3196FA', '#24AB86']
['blue', 'grey']
tooltipTitle
tooltip 标题
Array
null
['标题A']
scale
图表缩放比例
Number
1
2
grid
上下左右边距
Object
({
           top: 56,
           right: 60,
           bottom: 40,
           left: 60
       })
{ top: 84, right: 18, bottom: 56, left: 56 }
showSplitLine
是否显示辅助刻度线
Boolean
true
false
showCount
最多显示的数量（实际显示数量会根据输入值调整）
Number
6
4
dataZoomType
何种方式拖动 inside 内容区域拖动，slider 滑块拖动
String
'inside'
'slider'
dataZoomBottom
当 dataZoomType 为 slider 时，拖动区域距离底部的距离
Number
0
12
dataZoomStartAtEnd
从末尾开始显示图表
Boolean
true
false
showBarTopRect
柱子顶部是否显示白色方块
Boolean
true
false
markLine
标记线
Array
[]
[
    {
        value: 134,
        yAxisIndex: 0,
        color: '#33FFBB'
    },
    {
        value: 166,
        yAxisIndex: 0,
        color: '#F74768'
    }
]
tooltipConfine
是否将 tooltip 框限制在图表的区域内
Boolean
true
false
zoomLock
是否锁定选择区域的大小
Boolean
false
true
beforeSetOption
万能方法，图表渲染之前执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}
afterSetOption
万能方法，图表渲染之后执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}