zrx-chart

1.基础用法

vue

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

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

const chartRef = ref();

const xAxisData = new Array(12).fill().map((n, i) => `${ i + 1 }月`);
const seriesData = [
    {
        // 需要指定 y 轴索引
        yAxisIndex: 0,
        data: [53, 82, 97, 99, 87, 98, 94, 74, 74, 52, 62, 63]
    },
    {
        yAxisIndex: 1,
        data: [112, 131, 144, 117, 107, 147, 146, 135, 108, 107, 134, 125]
    }
];
const yAxisName = ['亿元', '%'];
const legendData = ['销售额', '贸易额'];
const chartOption = {
    showCount: 9,
    xAxisData,
    seriesData,
    yAxisName,
    legendData
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 664px;
    background-color: #144e8f;
}
</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

[]

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

yAxisName

y轴单位

String, Array

['']

['亿元', '%']

showCount

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

Number

dataZoomType

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

String

'inside'

'slider'

dataZoomBottom

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

Number

dataZoomStartAtEnd

从末尾开始显示图表

Boolean

true

false

showLegend

是否显示 legend

Boolean

true

false

showLabel

是否显示 label

Boolean

false

true

legendData

legend 数据

Array

[]

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

markLine

标记线

Array

[]

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

color

图表项颜色

Array

['rgb(243, 220, 60)', 'rgb(102, 255, 255)']

['red', 'green']

showLineArea

线条是否显示区域颜色

Boolean

true

false

tooltipTitle

tooltip 标题

Array

null

['标题A']

smooth

是否平滑

Boolean, Number

true

xAxisHighlightArea

高亮区域的索引

Array

[]

[2, 4]

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 的修改，绑定自定义事件等'
}

1.基础用法 ​

属性 ​

1.基础用法

属性