zrx-chart

1.柱-折线混合

vue

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

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

const chartRef = ref();

const xAxisData = ['1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const color = ['blue', 'green', 'celeste', 'grey'];
const seriesData = [
    {
        // 需要指定类型
        type: 'bar',
        // 需要指定 y 轴索引
        yAxisIndex: 0,
        data: [101, 31, 66, 120, 123, 9, 22, 128, 62]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [158, 171, 43, 143, 178, 96, 67, 18, 143]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [389, 283, 213, 315, 313, 256, 304, 233, 372]
    },
    {
        type: 'line',
        lineType: 'dashed',
        yAxisIndex: 1,
        data: [273, 245, 364, 252, 283, 368, 319, 389, 400]
    }
];
const yAxisName = ['亿元', '%'];
const legendData = ['住宅类均价', '办公类均价', '商业类均价', '住宅类增速', '办公类增速', '商业类增速'];
const chartOption = {
    xAxisData,
    seriesData,
    yAxisName,
    legendData,
    color
};

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

2.只有折线

vue

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

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

const chartRef = ref();

const xAxisData = ['1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const color = ['yellow', 'celeste', 'green', 'grey', 'violet', 'pink'];
const seriesData = [
    {
        // 需要指定类型
        type: 'line',
        data: [163, 129, 123, 198, 152, 152, 178, 133, 193]
    },
    {
        type: 'line',
        data: [81, 37, 30, 94, 45, 54, 60, 1, 69]
    },
    {
        type: 'line',
        data: [36, 17, 43, 26, 23, 77, 66, 60, 18]
    },
    {
        type: 'line',
        data: [61, 76, 63, 53, 82, 82, 74, 57, 79]
    },
    {
        type: 'line',
        data: [85, 74, 112, 74, 83, 86, 111, 112, 80]
    },
    {
        type: 'line',
        data: [71, 77, 113, 120, 60, 65, 79, 61, 113]
    },
    {
        type: 'line',
        data: [111, 116, 89, 107, 67, 97, 86, 116, 98]
    },
    {
        type: 'line',
        data: [120, 65, 93, 82, 112, 63, 75, 100, 81]
    }
];
const yAxisName = ['亿元'];
const legendData = ['汽车', '家电', '成品油', '日用品', '化妆品', '粮油', '天然气', '煤炭'];
const tooltipTitle = xAxisData.map(n => `2023年${n}`);
const chartOption = {
    xAxisData,
    seriesData,
    yAxisName,
    legendData,
    tooltipTitle,
    color
};

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

3.只有柱

vue

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

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

const chartRef = ref();

const xAxisData = ['1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const yAxisName = ['家'];
const seriesData = [
    {
        // 需要指定类型
        type: 'bar',
        // 需要指定 y 轴索引
        yAxisIndex: 0,
        data: [163, 129, 123, 198, 152, 152, 178, 133, 193]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [81, 37, 30, 94, 45, 54, 60, 1, 69]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [36, 17, 43, 26, 23, 77, 66, 60, 18]
    }
];
const legendData = ['总数', '房建', '市政'];
const chartOption = {
    xAxisData,
    yAxisName,
    seriesData,
    legendData
};

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

4.与图表联动

vue

<template>
    <bar-line-chart v-bind="chartOption" ref="chartRef"></bar-line-chart>
    <el-button style="margin: 20px 0;" type="primary" @click="changeLineState">显示/隐藏</el-button>
</template>

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

const chartRef = ref();

let chart = null;
// 回调函数获取 chart 对象
const afterSetOption = (option, c) => (chart = c);
// 按钮触发图表事件
const changeLineState = v => chart.dispatchAction({
    type: 'legendToggleSelect',
    name: legendData[0]
});

const xAxisData = ['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]
    }
];
const yAxisName = ['亿元'];
const legendData = ['营业额'];
const showLegend = false;
const chartOption = {
    xAxisData,
    seriesData,
    yAxisName,
    legendData,
    showLegend,
    afterSetOption
};

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

5.指定区域高亮

vue

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

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

const chartRef = ref();

const xAxisData = ['1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const yAxisName = ['家', '%'];
const seriesData = [
    {
        // 需要指定类型
        type: 'bar',
        // 需要指定 y 轴索引
        yAxisIndex: 0,
        data: [163, 129, 123, 198, 152, 152, 178, 133, 193]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [81, 37, 30, 94, 45, 54, 60, 1, 69]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [36, 17, 43, 26, 23, 77, 66, 60, 18]
    }
];
const legendData = ['总数', '房建', '市政'];
const xAxisHighlightArea = [3, 4];
const chartOption = {
    xAxisData,
    yAxisName,
    seriesData,
    legendData,
    xAxisHighlightArea
};

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

6.拖拽区域为滚动条

vue

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

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

const chartRef = ref();

const xAxisData = ['1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月'];
const yAxisName = ['家', '%'];
const seriesData = [
    {
        // 需要指定类型
        type: 'bar',
        // 需要指定 y 轴索引
        yAxisIndex: 0,
        data: [163, 129, 123, 198, 152, 152, 178, 133]
    },
    {
        type: 'line',
        lineType: 'dashed',
        yAxisIndex: 1,
        data: [81, 37, 30, 94, 45, 54, 60, 69]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [36, 17, 43, 26, 23, 77, 66, 60]
    }
];
const legendData = ['总数', '房建', '市政'];
const xAxisHighlightArea = [3, 4];
const showCount = 4;
const dataZoomType = 'slider';
const chartOption = {
    xAxisData,
    yAxisName,
    seriesData,
    legendData,
    xAxisHighlightArea,
    showCount,
    dataZoomType
};

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

属性

属性名

说明

类型

默认值

参考值

xAxisData

x 轴坐标

Array

[]

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

grid

上下左右边距

Object

({
           top: 60,
           right: 50,
           bottom: 33,
           left: 56
       })

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

seriesData

数据数组

Array

[]

[
    {
        // 需要指定类型
        type: 'bar',
        // 需要指定 y 轴索引
        yAxisIndex: 0,
        data: [163, 129, 123, 198, 152, 152, 178, 133]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [102, 126, 120, 136, 160, 198, 128, 141]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [182, 108, 114, 149, 188, 178, 122, 160]
    },
    {
        type: 'bar',
        yAxisIndex: 0,
        data: [187, 119, 141, 131, 139, 195, 113, 101]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [81, 17, 30, 94, 45, 54, 60, 69]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [36, 17, 43, 86, 23, 77, 66, 60]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [19, 97, 96, 21, 57, 71, 5, 65]
    },
    {
        type: 'line',
        yAxisIndex: 1,
        data: [46, 51, 35, 23, 78, 29, 79, 37]
    }
]

color

图表项颜色

Array

['blue', 'green', 'celeste', 'grey']

yAxisName

y轴单位

String, Array

['']

['亿元', '%']

showCount

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

Number

dataZoomType

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

String

'inside'

'slider'

dataZoomBottom

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

Number

showLegend

是否显示 legend

Boolean

true

false

legendData

legend 数据

Array

[]

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

tooltipTitle

tooltip 标题

Array

null

['标题A']

xAxisHighlightArea

高亮区域的索引

Array

[]

[2, 4]

dataZoomStartAtEnd

从末尾开始显示图表

Boolean

true

false

barBorderRadius

圆柱的圆角

Number, Array

[0]

[4, 4, 0, 0]

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.与图表联动 ​

5.指定区域高亮 ​

6.拖拽区域为滚动条 ​

属性 ​

支持方法 ​

1.柱-折线混合

2.只有折线

3.只有柱

4.与图表联动

5.指定区域高亮

6.拖拽区域为滚动条

属性

支持方法