折线图
折线图-基础
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
defineOptions({
name: 'BasicLineDemo'
})
</script>
<template>
<div
style="
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicLine" />
</div>
</template>折线图-堆叠
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
defineOptions({
name: 'BasicLineStackDemo'
})
</script>
<template>
<div
style="
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicLineStack" />
</div>
</template>折线图-面积
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
defineOptions({
name: 'BasicLineAreaDemo'
})
</script>
<template>
<div
style="
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicLineArea" />
</div>
</template>折线图-面积-堆叠
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
defineOptions({
name: 'BasicLineAreaStackDemo'
})
</script>
<template>
<div
style="
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicLineAreaStack" />
</div>
</template>