53 lines
937 B
Vue
53 lines
937 B
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import Container from './Base/Container.vue';
|
|
|
|
const chartChart = ref(null);
|
|
|
|
onMounted(() => {
|
|
chartChart.value.classList.add('h-full');
|
|
const mc = echarts.init(chartChart.value);
|
|
mc.setOption({
|
|
grid: {
|
|
top: 24,
|
|
bottom: 24,
|
|
left: 24,
|
|
right: 24,
|
|
},
|
|
tooltip: {},
|
|
xAxis: {
|
|
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
|
},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
name: '销量',
|
|
type: 'bar',
|
|
data: [5, 20, 36, 10, 10, 20],
|
|
},
|
|
],
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Container class="chart" title="本日班组情况" icon="cube">
|
|
<div ref="chartChart" class="chart-chart"></div>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
height: 300px;
|
|
}
|
|
|
|
.chart-inner {
|
|
background: #0f0;
|
|
}
|
|
|
|
.chart-chart {
|
|
height: 100%;
|
|
}
|
|
</style>
|