zrx-chart

Appearance

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

vue
<template>
    <bar-line-chart-6 ref="chartRef" v-bind="option"></bar-line-chart-6>
</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: ['总能耗', '总用水', '支出'],
    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.带辅助线的折线图 ​

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

const chartRef = ref();
// 组合配置项
const option = {
	smooth: true,
	showLineArea: true,
    showLegend: true,
    color: ['#0055FF', '#1FC49D'],
    grid: { right: 40 },
    unit: ['kw/h'],
    yAxisName: ['%'],
    legendData: ['总能耗', '总用水'],
    xAxisData: new Array(12).fill().map((n, i) => `${ (i + 1).toString().padStart(2, 0) }月`),
    markLine: [
	    {
	        value: 77,
	        yAxisIndex: 0,
	        color: '#FF9700'
	    }
	],
    seriesData: [
        {
            type: 'line',
            yAxisIndex: 0,
            data: [8, 30, 50, 82, 73, 84, 50, 8, 30, 50, 82, 73]
        },
        {
            type: 'line',
            yAxisIndex: 0,
            data: [133, 13, 27, 92, 44, 82, 19, 133, 13, 27, 92, 44]
        }
    ],
    beforeSetOption: option =>
    	option.series.forEach(item => item.type === 'line' && (item.markLine.data[0].label.formatter = param => `目标增速：{value|${ param.value }}`))
};

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

3.显示label隐藏线条 ​

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

const chartRef = ref();
// 组合配置项
const option = {
    showLegend: true,
    color: ['#0055FF', '#FF9700'],
    grid: { right: 40 },
    unit: ['亿元', '%'],
    yAxisName: ['亿元', '%'],
    legendData: ['地区生产总值', '同比增速'],
    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: 'line',
            yAxisIndex: 1,
            showLabel: true,
            data: [133, 13, 27, 92, 44, 82, 19, 133, 13, 27, 92, 44]
        }
    ],
    beforeSetOption: option => option.series.forEach(n => n.type === 'line' && (n.lineStyle.color = 'transparent'))
};

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

属性 ​

属性名
说明
类型
默认值
参考值
color
颜色
Array
['#0055FF', '#1FC49D', '#FF9700']
['blue', 'grey']
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
5
8
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
12
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
tooltipConfine
是否将 tooltip 框限制在图表的区域内
Boolean
true
true
alignTicks
是否将 yAxis 刻度线对齐
Boolean
true
false
markLine
标记线
Array
[]
[
    {
        value: 134,
        yAxisIndex: 0,
        color: '#33FFBB'
    },
    {
        value: 166,
        yAxisIndex: 0,
        color: '#F74768'
    }
]
scale
图表缩放比例
Number
1
2
beforeSetOption
万能方法，图表渲染之前执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}
afterSetOption
万能方法，图表渲染之后执行
Function
null
function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}