vue 大屏

<template>
  <div class="big-screen">
    <h1>Vue 大屏展示</h1>
    <div class="content">
      <!-- 这里可以放置大屏展示的内容，例如图表、数据面板等 -->
      <div class="chart" ref="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BigScreen',
  mounted() {
    // 初始化 ECharts 实例
    const chart = echarts.init(this.$refs.chart);

    // 设置图表的配置项和数据
    const option = {
      title: {
        text: '示例图表'
      },
      tooltip: {},
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10]
      }]
    };

    // 使用刚指定的配置项和数据显示图表
    chart.setOption(option);
  }
};
</script>

<style scoped>
.big-screen {
  width: 100%;
  height: 100vh;
  background-color: #2c3e50;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content {
  width: 80%;
  height: 80%;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

解释说明

1. 模板部分 (<template>):

   • div.big-screen: 包含整个大屏展示的容器。
   • h1: 标题，用于显示大屏的名称或主题。
   • div.content: 内容区域，可以放置各种图表或数据面板。
   • div.chart: 具体的图表展示区域，通过 ref 绑定到 JavaScript 中。

2. 脚本部分 (<script>):

   • 引入了 echarts 库，用于绘制图表。
   • 在 mounted 生命周期钩子中初始化 ECharts 实例，并设置图表的配置项和数据。
   • 使用 chart.setOption(option) 方法将配置项应用到图表上。

3. 样式部分 (<style scoped>):

   • 定义了大屏的整体布局和样式，确保其占满整个视口，并设置了背景颜色和文本颜色。
   • chart 的宽度和高度被设置为父容器的 100%，以确保图表能够正确显示。