zrx-chart

1.基础用法

vue

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

const chartRef = ref();

const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const seriesData = [
    {
        type: 'bar',
        data: [8, 30, 50, 82, 73, 84, 50]
    }
];
const color = ['#405FFE'];
const legendData = ['总能耗', '能耗照明', '节约能耗', '同环比'];
const yAxisName = '用量';
const unit = ['kw/h', '度', '千焦耳'];
// 组合配置项
const option = {
    xAxisData,
    seriesData,
    legendData,
    yAxisName,
    unit
};

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

2.宽度颜色调整

vue

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

const chartRef = ref();

const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const seriesData = [
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [8, 30, 50, 82, 73, 84, 50]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [32, 94, 61, 11, 52, 68, 58]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [133, 13, 27, 92, 44, 82, 19]
    }
];
const legendData = ['总能耗', '总用水', '支出'];
const yAxisName = ['左侧y轴', '右侧y轴'];
const unit = ['kw/h'];
const barWidth = 8;
const color = ['#405FFE', '#B8BED5', '#FFA433'];
const showLegend = true;
const grid = { right: 60 };
// 组合配置项
const option = {
    xAxisData,
    seriesData,
    legendData,
    barWidth,
    unit,
    color,
    showLegend,
    yAxisName,
    grid
};

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

属性

属性名

说明

类型

默认值

参考值

color

各项颜色

Array

['#405FFE', 'rgb(255, 164, 51)', 'rgb(27, 190, 140)']

xAxisData

x 轴坐标数据

Array

[]

['周一', '周二', '周三', '周四', '周五', '周六', '周日']

seriesData

x 图表数据

Array

[]

[
    [8, 30, 50, 82, 73, 84, 50],
    [32, 94, 61, 11, 52, 68, 58],
    [33, 13, 27, 92, 44, 82, 19]
]

legendData

legend 数据

Array

[]

['总能耗', '能耗照明', '节约能耗', '同环比']

yAxisName

y 轴单位

String, Array

'单位：次'

unit

数据的单位

String, Array

['kw/h', 'kw', 'h']

grid

上下左右间距

Object

({ top: 89, right: 16, bottom: 40, left: 53 })

{ top: 89, right: 16, bottom: 40, left: 53 }

showLegend

是否显示 legend

Boolean

false

emphasisCoverColor

被选中时，遮罩层的颜色

String

'rgba(255, 255, 255, 0.4)'

barWidth

柱子宽度

Number

smooth

是否平滑

Boolean, Number

false

true

axisLineType

指示线样式

String

'dashed'

'solid'

axisLineColor

指示线颜色

String

'rgba(59, 65, 85, 0.3)'

'rgba(255, 0, 0, 0.3)'

showLineSymbol

折线是否显示 symbol

Boolean

false

'circle'

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()

1.基础用法 ​

2.宽度颜色调整 ​

属性 ​

支持方法 ​

1.基础用法

2.宽度颜色调整

属性

支持方法