饼图
基础饼图
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
</script>
<template>
<div
style="
width: 600px;
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicPie" />
</div>
</template>多饼图
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
</script>
<template>
<div
style="
width: 600px;
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicMultiplePie" />
</div>
</template>环形图
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
</script>
<template>
<div
style="
width: 600px;
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicRollPie" />
</div>
</template>半环形图
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
</script>
<template>
<div
style="
width: 600px;
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicHalfRollPie" />
</div>
</template>玫瑰图
常规玫瑰图
两瓣玫瑰图
vue
<script setup lang="ts">
import { BasicChart, allEChartsOptions } from 'dz-bi-chart'
</script>
<template>
<h2 style="margin: 10px 0;">常规玫瑰图</h2>
<div
style="
width: 600px;
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicRosePie" />
</div>
<h2 style="margin: 10px 0;">两瓣玫瑰图</h2>
<div
style="
width: 600px;
height: 400px;
padding: 28px;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 8px #eee;
"
>
<BasicChart :options="allEChartsOptions.basicTwoRosePie" />
</div>
</template>