详解如何在Vue中快速实现数据可视化大屏展示

npm install -g @vue/cli

vue create my-project

npm install echarts --save

<template>
  <div ref="chart" style="width: 100%; height: 500px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'MyChart',
  props: ['option'],
  mounted() {
    // 初始化图表
    this.chart = echarts.init(this.$refs.chart);
    // 设置图表选项
    this.chart.setOption(this.option);
  },
  beforeDestroy() {
    // 销毁图表
    this.chart.dispose();
  }
};
</script>
<style scoped>
/* 可选的组件样式 */
</style>

export default {
  data() {
    return {
      data: []
    };
  },
  methods: {
    fetchData() {
      // 从后端获取数据
      axios.get('/api/data').then(response => {
        this.data = response.data;
      });
    }
  }
};

<template>
  <div>
    <my-chart :option="chartOption"></my-chart>
  </div>
</template>
<script>
import MyChart from './MyChart.vue';
import dataModel from './dataModel.js';
export default {
  name: 'Dashboard',
  components: {
    MyChart
  },
  data() {
    return {
      dataModel: dataModel,
      chartOption: {}
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.dataModel.fetchData().then(() => {
        this.updateChartOption();
      });
    },
    updateChartOption() {
      // 根据数据模型中的数据生成图表选项
      this.chartOption = {
        // Echarts图表选项配置
      };
    }
  }
};
</script>
<style scoped>
/* 可选的组件样式 */
</style>

<template>
  <div ref="chart" style="width: 100%; height: 500px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'BarChart',
  props: ['data'],
  mounted() {
    // 初始化图表
    this.chart = echarts.init(this.$refs.chart);
    // 设置图表选项
    this.chart.setOption({
      xAxis: {
        type: 'category',
        data: this.data.categories
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.data.values,
        type: 'bar'
      }]
    });
  },
  beforeDestroy() {
    // 销毁图表
    this.chart.dispose();
  }
};
</script>
<style scoped>
/* 可选的组件样式 */
</style>