zrx-chart

1.基础用法

vue

<template>
    <weather-chart ref="chartRef" v-bind="chartOption"></weather-chart>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();

const chartOption = {
    icons: [
        'http://cn.vitejs.dev/logo-with-shadow.png',
        'http://v2.cn.vuejs.org/images/logo.svg',
        'http://sponsors.vuejs.org/images/chrome_frameworks_fund.png'
    ],
    dates: ['今天\n03/25', '明天\n03/26', '周三\n03/27', '周四\n03/28', '周五\n03/29', '周六\n03/30', '周日\n03/31', '周一\n04/01', '周二\n04/02'],
    temperature: [[7, 18], [12, 24], [15, 26], [13, 22], [15, 24], [11, 27], [13, 25], [11, 27], [13, 25]]
};

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

属性

属性名

说明

类型

默认值

参考值

icons

天气 icon 数组

Array

['icon0', 'icon1', 'icon2']

iconSize

图表尺寸

Array

[40, 40]

dates

日期数组

Array

['今天\n03/25', '明天\n03/26', '周三\n03/27', '周四\n03/28', '周五\n03/29', '周六\n03/30', '周日\n03/31']

temperature

每一天的温度，二维数组

Array

[
           [7, 18],
           [12, 24],
           [15, 26],
           [13, 22],
           [15, 24],
           [11, 27],
           [13, 25]
       ]

[[7, 18], [12, 24], [15, 26], [13, 22], [15, 24], [11, 27], [13, 25]]

showCount

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

Number

dataZoomType

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

String

'inside'

'slider'

dataZoomBottom

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

Number

zoomLock

是否锁定选择区域的大小

Boolean

false

true

barWidth

柱子的宽度

Number

1.基础用法 ​

属性 ​

1.基础用法

属性