vue里放echart

在Vue中使用ECharts时，我们需要先引入ECharts的库文件和Vue的库文件。
一般情况下，我们可以通过npm下载工具来引入这些库文件。

npm install vue --save
npm install echarts --save

引入库文件后，我们需要在Vue的组件中引入ECharts方法，该方法需要传入两个参数：dom和option。其中，dom代表图表在HTML页面中渲染的位置，option代表图表的配置项。

<template>
  <div ref="chart" :style="{ width: '400px',height: '400px' }"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.chart.setOption(option);
  },destroyed() {
    this.chart.dispose();
  }
}
</script>

在上面的代码中，我们通过ref获取了组件的dom元素，然后通过echarts.init方法初始化了一个ECharts实例对象，接着将option配置项传入该实例对象的setOption方法中。

当组件被销毁时，我们需要通过this.chart.dispose()方法释放该实例占用的资源。

在Vue中，ECharts也可以通过组件化的方式使用。我们可以在组件内部编写ECharts的配置项，然后将其传递给ECharts组件。这种方式可以使我们的代码更加模块化，易于维护。

<template>
  <echarts :option="option" :style="{ width: '400px',height: '400px' }"></echarts>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      option: {
        // ECharts的配置项
      }
    }
  }
}
</script>

在上述代码中，我们通过Vue的组件echarts来渲染ECharts图表，然后将option作为组件的属性传递给其子组件。通过这种方式，我们可以在组件内部实现图表的动态更新。

总的来说，在Vue中使用ECharts还是比较简单的，只需要正确引入库文件，然后在组件中使用ECharts方法即可。同时，也可以通过组件化的方式实现对ECharts的封装，使其更加易用和灵活。