zrx-chart

Appearance

1.基础用法 ​

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

const chartRef = ref();

const seriesData = [
    [54, 89, 86, 65, 54],
    [95, 97, 75, 72, 90]
];
const xAxisData = ['1-2月', '1-3月', '1-4月', '1-5月', '1-6月'];
const legendData = ['建筑业总产值', '前20名产值'];
const yAxisName = '亿元';
const chartOption = {
    seriesData,
    xAxisData,
    legendData,
    yAxisName
};

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

2.指定区域高亮 ​

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

const chartRef = ref();

const seriesData = [
    [54, 89, 86, 65, 54, 89, 86],
    [95, 97, 75, 72, 90, 97, 75]

];
const xAxisData = ['1-3月', '4-6月', '7-9月', '10-12月', '2023年1-3月', '4-6月', '7-9月'];
const legendData = ['建筑业总产值', '前20名产值'];
const yAxisName = '亿元';
const xAxisHighlightArea = [2, 4, 5];
const chartOption = {
    seriesData,
    xAxisData,
    legendData,
    yAxisName,
    xAxisHighlightArea
};

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

3.拖拽区域为滚动条 ​

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

const chartRef = ref();

const seriesData = [
    [54, 89, 86, 65, 54, 53, 72],
    [95, 97, 75, 72, 90, 88, 54]
];
const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const legendData = ['统计金额', '开票金额'];
const showCount = 4;
const dataZoomType = 'slider';

const chartOption = {
    seriesData,
    xAxisData,
    legendData,
    showCount,
    dataZoomType
};

onMounted(() => chartRef.value.renderChart());

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

4.将dom元素作为tooltip ​

vue
<template>
    <div v-show="appendReady" class="custom-tooltip" ref="tooltipRef">
        <h4 class="tooltip-title">{{ tooltipTitle }}</h4>
        <div class="tooltip-content">{{ tooltipContent }}</div>
    </div>
    <bar-chart ref="chartRef" v-bind="chartOption"></bar-chart>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();
// 自定义 tooltip 的 dom 对象
const tooltipRef = ref();
// 是否已经将 tooltip 加入
const appendReady = ref(false);
// 自定义 tooltip 标题
const tooltipTitle = ref('');
// 自定义 tooltip 内容
const tooltipContent = ref('');
// 配置项
const chartOption = {
    seriesData: [[54, 89, 86, 65, 54]],
    xAxisData: ['1-2月', '1-3月', '1-4月', '1-5月', '1-6月'],
    legendData: ['建筑业总产值'],
    yAxisName: '亿元',
    // 通过万能方法 beforeSetOption 修改
    beforeSetOption: option => {
        // tooltip.formatter 指定返回自定义 dom 元素
        option.tooltip.formatter = params => {
            // 显示预先隐藏隐藏的 tooltip
            !appendReady.value && (appendReady.value = true);
            // 通过 params 计算自定义 tooltip 的标题内容
            tooltipTitle.value = params[0].name;
            tooltipContent.value = params.slice(0, 1).map(n => `${ n.value }万元`).join(' ');
            return tooltipRef.value
        }
    }
};
onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 340px;
    background-color: rgb(3, 43, 68);
}
.custom-tooltip {
    padding: 8px 12px;
    background-color: white;
    border-top-left-radius: 16px;
    border-bottom-right-radius: 16px;
    .tooltip-title {
        color: red;
    }
    .tooltip-content {
        color: orange;
    }
}
</style>

属性 ​

属性名
说明
类型
默认值
参考值
xAxisData
x 轴坐标
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: 18,
           bottom: 56,
           left: 56
       })
{ top: 84, right: 18, bottom: 56, left: 56 }
legendData
legend 数据
Array
[]
['统计金额', '开票金额']
yAxisName
y轴单位
String
''
'万元'
showCount
最多显示的数量（实际显示数量会根据输入值调整）
Number
7
4
dataZoomType
何种方式拖动 inside 内容区域拖动，slider 滑块拖动
String
'inside'
'slider'
dataZoomBottom
当 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
['标题A']
xAxisHighlightArea
高亮区域的索引
Array
[]
[2, 4]
dataZoomStartAtEnd
从末尾开始显示图表
Boolean
true
false
zoomLock
是否锁定选择区域的大小
Boolean
false
true
scale
图表缩放比例
Number
1
2
barBorderRadius
圆柱的圆角
Number, Array
[0]
[4, 4, 0, 0]
tooltipConfine
是否将 tooltip 框限制在图表的区域内
Boolean
true
false
beforeSetOption
万能方法，图表渲染之前执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}
afterSetOption
万能方法，图表渲染之后执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}

支持方法 ​

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