柱状图
柱状图-横向
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
defineOptions({
name: 'BasicBarDemo'
})
</script>
<template>
<div
style="
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicBar" />
</div>
</template>柱状图-纵向
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
defineOptions({
name: 'BasicBarVerticalDemo'
})
</script>
<template>
<div
style="
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicBarVertical" />
</div>
</template>柱状图-横向-堆叠
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
defineOptions({
name: 'BasicBarStackDemo'
})
</script>
<template>
<div
style="
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicBarStack" />
</div>
</template>柱状图-纵向-堆叠
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
defineOptions({
name: 'BasicBarStackVerticalDemo'
})
</script>
<template>
<div
style="
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicBarStackVertical" />
</div>
</template>