【Vue中使用Echarts】大屏可视化项目整体布局（pink老师vue 版）

以下是一个简化的Vue项目结构示例，展示了如何在Vue中使用ECharts创建一个大屏可视化界面：

|-- src
|   |-- assets
|   |   `-- echarts.js          // ECharts 库
|   |-- components
|   |   `-- Visualization.vue    // 可视化组件
|   |-- main.js                  // 入口文件
|   `-- App.vue                  // 根组件
`-- index.html                   // 主页面

main.js:

import Vue from 'vue';
import App from './App.vue';
import './assets/echarts.js'; // 导入ECharts库
 
new Vue({
  render: h => h(App),
}).$mount('#app');

App.vue:

<template>
  <div id="app">
    <visualization></visualization>
  </div>
</template>
 
<script>
import Visualization from './components/Visualization.vue';
 
export default {
  components: {
    Visualization
  }
}
</script>
 
<style>
/* 全屏样式 */
html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

Visualization.vue:

<template>
  <div ref="visualization" style="width: 100%; height: 100%"></div>
</template>
 
<script>
export default {
  name: 'Visualization',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = this.$echarts.init(this.$refs.visualization);
      chart.setOption({
        // ECharts 配置项
      });
    }
  }
}
</script>
 
<style scoped>
/* 组件内样式 */
</style>

确保你已经安装了ECharts (npm install echarts --save)，并在assets文件夹中引入了ECharts库。在Visualization.vue组件中，使用ref="visualization"来指定挂载点，并在mounted生命周期钩子中初始化ECharts实例。