zrx-chart

1.基础用法

vue

<template>
    <line-chart-3 ref="chartRef" v-bind="chartOption"></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月', '1-10月', '1-11月', '1-12月'];
const seriesData = [
    {
        yAxisIndex: 0,
        data: [18, 130, 150, 182, 173, 184, 150, 18, 130, 150, 182, 173]
    },
    {
        yAxisIndex: 1,
        data: [32, 94, 61, 11, 52, 68, 58, 94, 61, 11, 52, 68]
    }
];
const unit = ['万元', '%'];
const yAxisName = ['万元', '%'];
const color = ['#66FFFF', '#F4DC3C'];
const legendData = ['实际毛利率', '目标毛利率'];
// 组合配置项
const chartOption = {
    unit,
    color,
    xAxisData,
    yAxisName,
    seriesData,
    legendData
};

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

属性

属性名

说明

类型

默认值

参考值

scale

图表缩放比例

Number

xAxisData

x 轴坐标

Array

[]

['农业', '工业', '建筑业', '批发和零售业', '交通运输', '住宿和餐饮业', '金融业', '房地产业', '其他服务业']

yAxisName

y轴单位

String, Array

['']

['亿元', '%']

seriesData

数据数组

Array

[]

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

color

图表项颜色

Array

['#66FFFF', '#F4DC3C']

['red', 'green']

legendData

legend 数据

Array

[]

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

smooth

是否平滑

Boolean, Number

false

true

showLineArea

线条是否显示区域颜色

Boolean

true

false

showSplitLine

是否显示辅助刻度线

Boolean

true

false

grid

上下左右边距

Object

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

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

showLegend

是否显示 legend

Boolean

true

false

showCount

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

Number

dataZoomType

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

String

'inside'

'slider'

dataZoomBottom

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

Number

dataZoomStartAtEnd

从末尾开始显示图表

Boolean

true

false

showLabel

是否显示 label

Boolean

false

true

tooltipTitle

tooltip 标题

Array

null

['标题A']

zoomLock

是否锁定选择区域的大小

Boolean

false

true

tooltipConfine

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

Boolean

true

false

beforeSetOption

万能方法，图表渲染之前执行

Function

null

function (option, chart) {
return '执行对 option 的修改，绑定自定义事件等'
}

afterSetOption

万能方法，图表渲染之后执行

Function

null

function (option, chart) {
return '执行对 option 的修改，绑定自定义事件等'
}

1.基础用法 ​

属性 ​

1.基础用法

属性