使用vue2编写一套数据大屏代码

好的，以下是一个使用 Vue 2.x 编写的数据大屏的示例代码，你可以参考：

<template>
  <div class="data-screen">
    <div class="data-screen-header">
      <h1>{{ title }}</h1>
      <h2>{{ subtitle }}</h2>
    </div>
    <div class="data-screen-content">
      <div class="data-screen-chart">
        <echarts :options="chartOptions" />
      </div>
      <div class="data-screen-table">
        <table>
          <thead>
            <tr>
              <th v-for="(col, index) in tableCols" :key="index">{{ col }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in tableRows" :key="index">
              <td>{{ row.date }}</td>
              <td>{{ row.value }}</td>
              <td>{{ row.rate }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-gl'
import 'echarts-wordcloud'
import 'echarts-liquidfill'
import 'echarts-liquidfill/src/liquidFill.js'
import 'echarts-liquidfill/src/liquidPath.js'

export default {
  name: 'DataScreen',
  components: {
    echarts
  },
  props: {
    title: {
      type: String,
      default: '数据大屏'
    },
    subtitle: {
      type: String,
      default: ''
    },
    chartOptions: {
      type: Object,
      default: () => ({})
    },
    tableCols: {
      type: Array,
      default: () => (['日期', '数值', '增长率'])
    },
    tableRows: {
      type: Array,
      default: () => ([])
    }
  }
}
</script>

<style scoped>
.data-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.data-screen-header {
  margin-bottom: 20px;
  text-align: center;
}

.data-screen-header h1 {
  font-size: 32px;
  font-weight: bold;
}

.data-screen-header h2 {
  font-size: 24px;
}

.data-screen-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 100px);
}

.data-screen-chart {
  width: 70%;
  height: 100%;
}

.data-screen-table {
  width: 30%;
  height: 100%;
  overflow: auto;
}

.data-screen-table table {
  width: 100%;
  border-collapse: collapse;
}

.data-screen-table th {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
}

.data-screen-table td {
  padding: 10px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #e0e0e0;
}
</style>

这个组件包含一个标题、副标题、一个 Echarts 图表和一个表格。你可以通过 `title` 和 `subtitle` 属性来设置标题和副标题，通过 `chartOptions` 属性来设置图表的配置选项，通过 `tableCols` 和 `tableRows` 属性来设置表格的列和行数据。

注意，你需要先安装并引入 Echarts 库，这里的示例代码是在 `main.js` 中引入的：

import Vue from 'vue'
import App from './App.vue'
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

new Vue({
  render: h => h(App)
}).$mount('#app')

当然，这只是一个示例代码，你需要根据具体需求来编写真实的数据大屏。