zrx-chart

Appearance

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

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

const chartRef = ref();
// 组合配置项
const option = {
    showLegend: true,
    grid: { right: 40 },
    unit: ['kw/h', '吨', '元'],
    yAxisName: ['左侧y轴', '右侧y轴'],
    legendData: ['总能耗', '总用水', '支出'],
    color: ['#0055FF', '#1FC49D', '#FF9700'],
    xAxisData: new Array(12).fill().map((n, i) => `${ (i + 1).toString().padStart(2, 0) }月`),
    seriesData: [
        {
            type: 'bar',
            yAxisIndex: 0,
            data: [8, 30, 50, 82, 73, 84, 50, 8, 30, 50, 82, 73]
        },
        {
            type: 'bar',
            yAxisIndex: 0,
            data: [32, 94, 61, 11, 52, 68, 58, 32, 94, 61, 11, 52]
        },
        {
            type: 'line',
            yAxisIndex: 1,
            data: [133, 13, 27, 92, 44, 82, 19, 133, 13, 27, 92, 44]
        }
    ]
};

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

2.只有柱(画像app) ​

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

const chartRef = ref();
// 组合配置项
const option = {
    showLegend: true,
    unit: ['kw/h', '吨'],
    yAxisName: ['左侧y轴'],
    legendData: ['总能耗', '总用水'],
    color: ['#0055FF', '#1FC49D'],
    xAxisData: new Array(12).fill().map((n, i) => `${ (i + 1).toString().padStart(2, 0) }月`),
    seriesData: [
        {
            type: 'bar',
            yAxisIndex: 0,
            data: [8, 30, 50, 82, 73, 84, 50, 8, 30, 50, 82, 73]
        },
        {
            type: 'bar',
            yAxisIndex: 0,
            data: [32, 94, 61, 11, 52, 68, 58, 32, 94, 61, 11, 52]
        }
    ]
};

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

3.只有折线(画像app) ​

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

const chartRef = ref();
// 组合配置项
const option = {
    showLegend: true,
    showLineArea: true,
    unit: ['kw/h'],
    yAxisName: ['左侧y轴'],
    legendData: ['总能耗'],
    color: ['#0055FF'],
    xAxisData: new Array(12).fill().map((n, i) => `${ (i + 1).toString().padStart(2, 0) }月`),
    seriesData: [
        {
            type: 'line',
            yAxisIndex: 0,
            data: [8, 30, 50, 82, 73, 84, 50, 38, 30, 50, 82, 73]
        }
    ]
};

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

4.tooltip 值处理（画像app） ​

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

const chartRef = ref();
// 组合配置项
const option = {
    showLegend: true,
    grid: { right: 40 },
    unit: ['kw/h', '吨', '元'],
    yAxisName: ['左侧y轴', '右侧y轴'],
    legendData: ['总能耗', '总用水', '支出'],
    color: ['#0055FF', '#1FC49D', '#FF9700'],
    xAxisData: new Array(12).fill().map((n, i) => `${ (i + 1).toString().padStart(2, 0) }月`),
    seriesData: [
        {
            type: 'bar',
            yAxisIndex: 0,
            data: [8, 30, 50, 82, 73, 84, 50, 8, 30, 50, 82, 73]
        },
        {
            type: 'bar',
            yAxisIndex: 0,
            data: [32, 94, 61, 11, 52, 68, 58, 32, 94, 61, 11, 52]
        },
        {
            type: 'line',
            yAxisIndex: 1,
            data: [133, 13, 27, 92, 44, 82, 19, 133, 13, 27, 92, 44]
        }
    ],
    tooltipValueFormatter: (value, seriesIndex, dataIndex) => {
    	console.log(value, seriesIndex, dataIndex);
    	return '*****';
    }
};

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

属性 ​

属性名
说明
类型
默认值
参考值
color
各项颜色
Array
['#405FFE', 'rgb(255, 164, 51)', 'rgb(27, 190, 140)']
['#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]
]
showCount
最多显示的数量（实际显示数量会根据输入值调整）
Number
9
5
dataZoomType
何种方式拖动 inside 内容区域拖动，slider 滑块拖动
String
'slider'
'inside'
dataZoomBottom
当 dataZoomType 为 slider 时，拖动区域距离底部的距离
Number
0
12
dataZoomStartAtEnd
从末尾开始显示图表
Boolean
true
false
legendData
legend 数据
Array
[]
['总能耗', '能耗照明', '节约能耗', '同环比']
yAxisName
y 轴单位
String, Array
''
'单位：次'
unit
数据的单位
String, Array
''
['kw/h', 'kw', 'h']
grid
上下左右间距
Object
({ top: 65, right: 12, bottom: 34, left: 40 })
{ top: 89, right: 12, bottom: 40, left: 53 }
showLegend
是否显示 legend
Boolean
false
false
emphasisCoverColor
被选中时，遮罩层的颜色
String
'rgba(255, 255, 255, 0.4)'
'rgba(255, 255, 255, 0.4)'
barWidth
柱子宽度
Number
6
24
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
true
'circle'
showLineArea
线条是否显示区域颜色
Boolean
false
true
scale
图表缩放比例
Number
1
2
alignTicks
是否将 yAxis 刻度线对齐
Boolean
true
false
tooltipConfine
是否将 tooltip 框限制在图表的区域内
Boolean
true
false
tooltipValueFormatter
处理 tooltip 的值方法
Function
null
null
tooltipTitle
tooltip 标题
Array
null
['标题']
beforeSetOption
万能方法，图表渲染之前执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}
afterSetOption
万能方法，图表渲染之后执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}