zrx-chart

1.基础用法

vue

<template>
    <bar-chart-6 ref="chartRef" v-bind="chartOption"></bar-chart-6>
    <div class="line"></div>
</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]
    },
    {
        yAxisIndex: 0,
        data: [61, 11, 52, 68, 58, 94, 61, 11, 52, 68, 52, 94]
    }
];
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 legendData = ['申请', '审批', '完成'];

const chartOption = {
    unit,
    scale: 2,
    showCount: 6,
    xAxisData,
    yAxisName,
    seriesData,
    legendData
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 180px;
    height: 380px;
    // width: 420px;
    // background-image: url('./bg.png');
    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

['#DE882C', '#2CB0DE', '#82ED9A']

['blue', 'grey']

tooltipTitle

tooltip 标题

Array

null

['标题A']

scale

图表缩放比例

Number

grid

上下左右边距

Object

({
           top: 42,
           right: 50,
           bottom: 28,
           left: 50
       })

{ top: 84, right: 18, bottom: 56, left: 56 }

showSplitLine

是否显示辅助刻度线

Boolean

true

false

showCount

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

Number

dataZoomType

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

String

'inside'

'slider'

dataZoomBottom

当 dataZoomType 为 slider 时，拖动区域距离底部的距离

Number

dataZoomStartAtEnd

从末尾开始显示图表

Boolean

true

false

showBarTopRect

柱子顶部是否显示白色方块

Boolean

true

false

markLine

标记线

Array

[]

[
    {
        value: 134,
        yAxisIndex: 0,
        color: '#33FFBB'
    },
    {
        value: 166,
        yAxisIndex: 0,
        color: '#F74768'
    }
]

zoomLock

是否锁定选择区域的大小

Boolean

false

true

tooltipConfine

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

Boolean

true

false

beforeSetOption

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

Function

null

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

afterSetOption

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

Function

null

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

1.基础用法 ​

属性 ​

1.基础用法

属性