Skip to content

XAxis x轴组件

基本用法

vue
<script setup>
    import { ref } from 'vue'

    const data =[
        // ...
    ]
</script>
<template>
    <VueEcharts style="width:100%;height:300px;" :animation="false">
        <Grid :top='40' :left='50' :right="40" :bottom='50' />
        <XAxis name='x' >
            <MinorTick :show="true" />
            <SplitLine>
                <LineStyle color='#999' />
            </SplitLine>
            <MinorSplitLine>
                <LineStyle color='#ddd' />
            </MinorSplitLine>
        </XAxis>
        <YAxis name='y' :min='100' :max="100">
            <MinorTick :show="true" />
            <SplitLine>
                <LineStyle color='#999' />
            </SplitLine>
            <MinorSplitLine>
                <LineStyle color='#ddd' />
            </MinorSplitLine>
        </YAxis>
        <DataZoom show type='inside' filterMode='none' :startValue='-20' :endValue='20' :xAxisIndex='[0]'  />
        <DataZoom show type='inside' filterMode='none' :startValue='-20' :endValue='20' :yAxisIndex='[0]'  />
        <Line :showSymbol='false' clip smooth :data='data' />
    </VueEcharts>
</template>