zrx-chart

1.基础用法

vue

<template>
    <bar-line-chart-3 v-bind="chartOption" ref="chartRef"></bar-line-chart-3>
</template>

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

const chartRef = ref();

const xAxisData = ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const seriesData = [
    {
        // 需要指定类型
        type: 'bar',
        // 需要指定 y 轴索引
        yAxisIndex: 0,
        data: [163, 129, 123, 198, 152, 152, 178, 133, 193]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [81, 17, 30, 94, 45, 54, 60, -1, 69]
    }
];
const yAxisName = ['亿元', '%'];
const legendData = ['销售额', '贸易额'];
const chartOption = {
    showCount: 3,
    xAxisData,
    seriesData,
    yAxisName,
    legendData,
    beforeSetOption: (option) => {
        console.log(option)
    }
};

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

2.只有折线

vue

<template>
    <bar-line-chart-3 v-bind="chartOption" ref="chartRef"></bar-line-chart-3>
</template>

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

const chartRef = ref();

const xAxisData = ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const seriesData = [
    {
        // 需要指定类型
        type: 'line',
        data: [163, 129, 123, 198, 152, 152, 178, 133, 193]
    },
    {
        type: 'line',
        data: [81, 17, 30, 94, 45, 54, 60, 1, 69]
    }
];
const color = ['yellow', 'celeste'];
const yAxisName = ['亿元', '%'];
const legendData = ['销售额', '贸易额'];
const showLineArea = true;
const markLine = [
    {
        value: 77,
        yAxisIndex: 0,
        color: '#F74768'
    }
];
const beforeSetOption = option => {
    option.series.forEach(item => item.type === 'line' && (item.markLine.data[0].label.formatter = param => `目标增速：{value|${ param.value }}`));
};
const chartOption = {
    showCount: 3,
    xAxisData,
    seriesData,
    yAxisName,
    legendData,
    color,
    showLineArea,
    markLine,
    beforeSetOption
};

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

3.只有折线

vue

<template>
    <bar-line-chart-3 v-bind="chartOption" ref="chartRef"></bar-line-chart-3>
</template>

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

const chartRef = ref();

const xAxisData = ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const seriesData = [
    {
        // 需要指定类型
        type: 'line',
        data: [163, 129, 123, 198, 152, 152, 178, 133, 193]
    },
    {
        type: 'line',
        data: [81, 17, 30, 94, 45, 54, 60, 1, 69]
    },
    {
        type: 'line',
        data: [82, 85, 74, 70, 63, 85, 62, 50, 69, 65]
    },
    {
        type: 'line',
        data: [88, 53, 96, 80, 100, 93, 77, 84, 71, 80]
    },
    {
        type: 'line',
        data: [59, 94, 86, 70, 93, 80, 74, 93, 85, 90]
    }
];
const color = ['yellow', 'celeste', 'green', 'grey', 'pink'];
const yAxisName = ['亿元'];
const legendData = ['香洲区', '金湾区', '斗门区', '高新区', '鹤洲新区'];
const chartOption = {
    showCount: 3,
    xAxisData,
    seriesData,
    yAxisName,
    legendData,
    color
};

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

4.混合

vue

<template>
    <bar-line-chart-3 v-bind="chartOption" ref="chartRef"></bar-line-chart-3>
</template>

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

const chartRef = ref();

const xAxisData = ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const seriesData = [
    {
        // 需要指定类型
        type: 'bar',
        data: [163, 129, 123, 198, 152, 152, 178, 133, 193]
    },
    {
        type: 'bar',
        data: [81, 17, 30, 94, 45, 54, 60, 1, 69]
    },
    {
        type: 'bar',
        data: [82, 85, 74, 70, 63, 85, 62, 50, 69, 65]
    },
    {
        type: 'bar',
        data: [88, 53, 96, 80, 100, 93, 77, 84, 71, 80]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [59, 94, 86, 70, 93, 80, 74, 93, 85, 90]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [83, 86, 62, 83, 70, 82, 97, 59, 74, 80]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [90, 67, 74, 76, 70, 93, 54, 97, 90, 68]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [66, 73, 58, 91, 95, 84, 51, 73, 91, 82]
    }
];
const beforeSetOption = option => {
	option.legend.show = false;
	option.series.forEach((n, i) => {
		n.label.show = n.showBackground = false;
		if (n.type === 'bar') {
			n.barWidth = 20 / 1080 * window.innerHeight;
			n.barGap = `${ 12 / 20 * 100 }%`;
		}
	})
};
const color = ['blue', 'green', 'celeste', 'grey', 'blue', 'green', 'celeste', 'grey'];
const yAxisName = ['亿元', '%'];
const legendData = ['柱状图0', '柱状图1', '柱状图2', '柱状图3', '折线图0', '折线图1', '折线图2', '折线图3'];
const chartOption = {
    showCount: 3,
    xAxisData,
    seriesData,
    yAxisName,
    legendData,
    color,
    beforeSetOption
};

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

属性

属性名

说明

类型

默认值

参考值

xAxisData

x 轴坐标

Array

[]

['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月']

grid

上下左右边距

Object

({
           top: 109,
           right: 70,
           bottom: 80,
           left: 90
       })

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

seriesData

数据数组

Array

[]

[
    {
        // 需要指定类型
        type: 'bar',
        // 需要指定 y 轴索引
        yAxisIndex: 0,
        data: [163, 129, 123, 198, 152, 152, 178]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [81, 17, 30, 94, 45, 54, 60]
    }
]

yAxisName

y轴单位

String, Array

['']

['亿元', '%']

showCount

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

Number

dataZoomType

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

String

'slider'

dataZoomBottom

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

Number

dataZoomStartAtEnd

从末尾开始显示图表

Boolean

true

false

showLegend

是否显示 legend

Boolean

true

false

legendData

legend 数据

Array

[]

['统计金额', '开票金额']

markLine

标记线

Array

[]

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

color

图表项颜色

Array

['blue', 'yellow', 'grey']

showLineArea

线条是否显示区域颜色

Boolean

false

true

tooltipTitle

tooltip 标题

Array

null

['标题A']

xAxisHighlightArea

高亮区域的索引

Array

[]

[2, 4]

smooth

是否平滑

Boolean, Number

false

true

zoomLock

是否锁定选择区域的大小

Boolean

false

true

tooltipConfine

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

Boolean

true

false

scale

图表缩放比例

Number

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.只有折线 ​

3.只有折线 ​

4.混合 ​

属性 ​

支持方法 ​

1.基础用法

2.只有折线

3.只有折线

4.混合

属性

支持方法