<template>
|
<div class="p-4">
|
<a-card :bordered="false" style="height: 100%">
|
<a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
|
<a-tab-pane key="1" tab="柱状图">
|
<a-row>
|
<a-col :span="24">
|
<Bar :chartData="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }"></Bar>
|
</a-col>
|
<!-- <a-col :span="7" style="margin-left:50px" >
|
配置项：
|
<textarea rows="18" style="width: 500px">{{ barDataSource }}</textarea>
|
</a-col>-->
|
</a-row>
|
</a-tab-pane>
|
<a-tab-pane key="2" tab="多列柱状图" force-render>
|
<BarMulti :chartData="barMultiData" :option="multiBarOption" height="50vh"></BarMulti>
|
</a-tab-pane>
|
<a-tab-pane key="3" tab="迷你柱状图" style="display: flex; justify-content: center">
|
<Bar :chartData="barDataSource" width="30%" height="50vh"></Bar>
|
</a-tab-pane>
|
<a-tab-pane key="4" tab="面积图">
|
<Line :chartData="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }"></Line>
|
</a-tab-pane>
|
<a-tab-pane key="5" tab="迷你面积图" style="display: flex; justify-content: center">
|
<Line :chartData="barDataSource" width="30%" height="50vh"></Line>
|
</a-tab-pane>
|
<a-tab-pane key="6" tab="多行折线图">
|
<LineMulti :chartData="barMultiData" height="50vh" :option="multiBarOption" type="line"></LineMulti>
|
</a-tab-pane>
|
<a-tab-pane key="7" tab="饼图">
|
<pie :chartData="pieData" height="40vh" :option="{ title: { text: '基础饼状图', left: 'center' } }" />
|
</a-tab-pane>
|
<a-tab-pane key="8" tab="雷达图">
|
<Radar :chartData="radarData" height="50vh"></Radar>
|
</a-tab-pane>
|
<a-tab-pane key="9" tab="仪表盘">
|
<Gauge :chartData="{ name: '出勤率', value: 70 }" height="50vh"></Gauge>
|
</a-tab-pane>
|
<a-tab-pane key="10" tab="折柱图">
|
<BarAndLine :chartData="barLineData" height="50vh"></BarAndLine>
|
</a-tab-pane>
|
<a-tab-pane key="11" tab="排名列表">
|
<RankList title="门店销售排行榜" :list="rankList" style="width: 600px; margin: 0 auto"></RankList>
|
</a-tab-pane>
|
<a-tab-pane key="13" tab="趋势">
|
<trend title="Trend" term="Trend：" :percentage="30" />
|
</a-tab-pane>
|
<!--暂无-->
|
<!-- <a-tab-pane key="14" tab="进度条">
|
<Bar :option="{xAxis:{show:false},yAxis:{show:false}}" :chartData="chartData" width="100px" height="50px"></Bar>
|
</a-tab-pane>-->
|
<!--<a-tab-pane key="15" tab="水波图"></a-tab-pane>-->
|
</a-tabs>
|
</a-card>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from 'vue';
|
import { getData } from './chartdemo.data.ts';
|
import Bar from '/@/components/chart/Bar.vue';
|
import BarMulti from '/@/components/chart/BarMulti.vue';
|
import Line from '/@/components/chart/Line.vue';
|
import LineMulti from '/@/components/chart/LineMulti.vue';
|
import Pie from '/@/components/chart/Pie.vue';
|
import Radar from '/@/components/chart/Radar.vue';
|
import Gauge from '/@/components/chart/Gauge.vue';
|
import RankList from '/@/components/chart/RankList.vue';
|
import Trend from '/@/components/chart/Trend.vue';
|
import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
const activeKey = ref('1');
|
const { barDataSource, barMultiData, pieData, barLineData, radarData } = getData;
|
const multiBarOption = {
|
title: { text: '多列柱状图', left: 'center' },
|
};
|
const rankList = loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店');
|
//tab切换
|
function tabChange(key) {
|
console.log('切换的key:', key);
|
}
|
function loadData(x, y, max, min, before = '', after = '月') {
|
let data = [];
|
for (let i = 0; i < 12; i += 1) {
|
data.push({
|
[x]: `${before}${i + 1}${after}`,
|
[y]: Math.floor(Math.random() * max) + min,
|
});
|
}
|
return data;
|
}
|
</script>
|
