| <script setup lang="ts"> |
| import { ref, onMounted } from 'vue' |
| import * as echarts from 'echarts' |
|
|
| |
| const chartRef = ref(null) |
|
|
| const props = defineProps({ |
| knowledgeBasesNum: { |
| type: Number, |
| default: 0 |
| }, |
|
|
| digitalHumanNum: { |
| type: Number, |
| default: 0 |
| }, |
|
|
| LiveRoomNum: { |
| type: Number, |
| default: 0 |
| } |
| }) |
|
|
| |
| const initChart = () => { |
| const chart = echarts.init(chartRef.value) |
|
|
| // 配置图表的选项 |
| const option = { |
| title: { |
| text: '系统配置' |
| }, |
| tooltip: {}, |
| xAxis: { |
| data: ['知识库数量', '数字人数量', '直播间数量'] |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| name: '数量', |
| type: 'bar', |
| data: [props.knowledgeBasesNum, props.digitalHumanNum, props.LiveRoomNum] |
| } |
| ] |
| } |
|
|
| |
| chart.setOption(option) |
| } |
|
|
| |
| onMounted(() => { |
| initChart() |
| }) |
| </script> |
|
|
| <template> |
| <div ref="chartRef" style="width: auto; height: 400px"></div> |
| </template> |
|
|
| <style scoped> |
| |
| </style> |
| |
