zrx-chart

1.基础用法(画像app)

vue

<template>
    <bar-chart-2 ref="chartRef" v-bind="option"></bar-chart-2>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();

const yAxisData = [
    ['农业', '工业', '建筑业', '批发和零售业', '交通运输', '住宿和餐饮业', '金融业', '房地产业', '其他服务业'],
    ['农', '工', '建', '批', '交', '住', '金', '房', '其']
];
const seriesData = [
    [54, -89, -86, 65, 54, 53, -72, 65, -60],
    [95, -97, 75, 72, 90, -88, 54, -77, -98]
];
const legendData = ['统计金额', '开票金额'];
// 组合配置项
const option = {
    yAxisData,
    seriesData,
    legendData
};

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

属性

属性名

说明

类型

默认值

参考值

grid

上下左右边距

Object

({ top: 0, right: 40, bottom: 0, left: 40 })

{ 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

120

borderRadius

圆柱的圆角

Number

barWidth

圆的宽度

Number

showValue

是否显示数值

Boolean

false

unit

单位

String

'人'

showCount

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

Number

dataZoomType

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

String

'inside'

'slider'

dataZoomRight

当 dataZoomType 为 slider 时，拖动区域距离右侧的距离

Number

color

颜色

Array

[
           {
               type: 'linear',
               x: 0, y: 0, x2: 1, y2: 0,
               colorStops: [
                   { offset: 0, color: '#61CCFF' },
                   { offset: 1, color: '#0055FF' }
               ]
           },
           {
               type: 'linear',
               x: 0, y: 0, x2: 1, y2: 0,
               colorStops: [
                   { offset: 0, color: '#1FC49D' },
                   { offset: 1, color: '#23DFE1' }
               ]
           }
       ]

['blue', 'grey']

zoomLock

是否锁定选择区域的大小

Boolean

false

true

scale

图表缩放比例

Number

tooltipConfine

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

Boolean

true

false

beforeSetOption

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

Function

null

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

afterSetOption

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

Function

null

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

1.基础用法(画像app) ​

属性 ​

1.基础用法(画像app)

属性