选项式vue+echarts

选项式 Vue + ECharts 是一种结合 Vue.js (一个流行的渐进式 JavaScript 框架) 和 ECharts (一款强大的数据可视化库) 的实践方式。在 Vue 中使用 ECharts，主要是通过将 ECharts 的配置项作为 Vue 组件的数据属性（props 或者 data）传递，并利用 Vue 的模板系统动态渲染图表。开发者可以定义好图表的基础配置，然后在需要的地方根据数据的变化实时更新图表展示。

以下是基本步骤：

1. 安装依赖：首先安装 Vue 和 ECharts 的 Vue 插件，如 vue-echarts 或 element-echarts。

npm install vue echarts vue-echarts

2. 创建组件：创建一个新的 Vue 组件，将 ECharts 配置对象作为组件的 data 或 props。

<template>
  <div :style="{ width: '600px', height: '400px' }">
    <ec-charts :options="chartOptions" ref="chart"></ec-charts>
  </div>
</template>

<script>
import { ECharts } from 'vue-echarts';

export default {
  components: {
    ECCharts: ECharts,
  },
  data() {
    return {
      chartOptions: {
        // ECharts 初始化配置
      }
    };
  },
  methods: {
    updateChart(data) {
      this.chartOptions_series = data; // 更新系列数据
      this.$refs.chart.setOption(this.chartOptions); // 更新图表
    }
  },
};
</script>

3. 使用组件：在其他 Vue 实例中，通过 `v-bind` 或 `this.$emit` 动态传入数据和配置到图表组件上。

<parent-component @updateData="updateChart"></parent-component>