129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
<template>
|
|
<div class="chart">
|
|
<t-layout>
|
|
<t-header>
|
|
<h1>图表演示</h1>
|
|
<nav>
|
|
<t-menu :value="activeMenu" @click="handleMenuClick" theme="light" mode="horizontal">
|
|
<t-menu-item value="/">首页</t-menu-item>
|
|
<t-menu-item value="/dashboard">仪表盘</t-menu-item>
|
|
<t-menu-item value="/chart">图表</t-menu-item>
|
|
<t-menu-item value="/map">地图</t-menu-item>
|
|
<t-menu-item value="/graph">关系图</t-menu-item>
|
|
</t-menu>
|
|
</nav>
|
|
</t-header>
|
|
<t-content>
|
|
<t-grid :columns="2" :gutter="20">
|
|
<t-grid-item>
|
|
<t-card title="柱状图">
|
|
<div ref="barChartRef" class="chart-item"></div>
|
|
</t-card>
|
|
</t-grid-item>
|
|
<t-grid-item>
|
|
<t-card title="折线图">
|
|
<div ref="lineChartRef" class="chart-item"></div>
|
|
</t-card>
|
|
</t-grid-item>
|
|
<t-grid-item>
|
|
<t-card title="饼图">
|
|
<div ref="pieChartRef" class="chart-item"></div>
|
|
</t-card>
|
|
</t-grid-item>
|
|
<t-grid-item>
|
|
<t-card title="散点图">
|
|
<div ref="scatterChartRef" class="chart-item"></div>
|
|
</t-card>
|
|
</t-grid-item>
|
|
</t-grid>
|
|
</t-content>
|
|
</t-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import * as echarts from 'echarts'
|
|
|
|
const router = useRouter()
|
|
const activeMenu = ref('/chart')
|
|
const barChartRef = ref(null)
|
|
const lineChartRef = ref(null)
|
|
const pieChartRef = ref(null)
|
|
const scatterChartRef = ref(null)
|
|
|
|
const handleMenuClick = (value) => {
|
|
activeMenu.value = value
|
|
router.push(value)
|
|
}
|
|
|
|
onMounted(() => {
|
|
initBarChart()
|
|
initLineChart()
|
|
initPieChart()
|
|
initScatterChart()
|
|
})
|
|
|
|
const initBarChart = () => {
|
|
const chart = echarts.init(barChartRef.value)
|
|
chart.setOption({
|
|
xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
|
|
yAxis: {},
|
|
series: [{
|
|
data: [10, 20, 30, 40, 50],
|
|
type: 'bar'
|
|
}]
|
|
})
|
|
}
|
|
|
|
const initLineChart = () => {
|
|
const chart = echarts.init(lineChartRef.value)
|
|
chart.setOption({
|
|
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
|
|
yAxis: {},
|
|
series: [{
|
|
data: [120, 200, 150, 300, 250],
|
|
type: 'line'
|
|
}]
|
|
})
|
|
}
|
|
|
|
const initPieChart = () => {
|
|
const chart = echarts.init(pieChartRef.value)
|
|
chart.setOption({
|
|
series: [{
|
|
type: 'pie',
|
|
data: [
|
|
{ value: 30, name: 'A' },
|
|
{ value: 20, name: 'B' },
|
|
{ value: 50, name: 'C' }
|
|
]
|
|
}]
|
|
})
|
|
}
|
|
|
|
const initScatterChart = () => {
|
|
const chart = echarts.init(scatterChartRef.value)
|
|
chart.setOption({
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{
|
|
type: 'scatter',
|
|
data: [[10, 20], [20, 30], [30, 40], [40, 50], [50, 60]]
|
|
}]
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
padding: 20px;
|
|
}
|
|
|
|
.chart-item {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
</style>
|