vue中写echarts

在Vue中使用echarts，您需要先安装echarts依赖，并在Vue组件中引入echarts库。以下是一个简单的示例，演示如何在Vue中使用echarts：

1. 安装echarts依赖：

npm install echarts

2. 在Vue组件中引入echarts：

<template>
  <div>
    <div ref="chart" style="width: 400px; height: 300px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 获取chart容器
      const chartContainer = this.$refs.chart;

      // 初始化echarts实例
      const chart = echarts.init(chartContainer);

      // 定义图表配置项和数据
      const option = {
        // 配置项...
      };

      // 使用配置项和数据绘制图表
      chart.setOption(option);
    }
  }
}
</script>

<style>
/* 样式... */
</style>

在上述示例中，我们首先通过`import`语句引入了echarts库。然后，在Vue组件的`mounted`生命周期钩子函数中调用`initChart`方法初始化图表。在`initChart`方法中，我们获取了chart容器的引用，并使用`echarts.init`方法创建了一个echarts实例。接下来，您可以根据需要定义图表的配置项和数据，并使用`chart.setOption`方法将它们应用到图表上。

请注意，在上述示例中，我们将chart容器的引用赋值给了`ref="chart"`，并在样式中设置了chart容器的宽度和高度。您可以根据需要调整宽度和高度的数值。

这只是一个简单的示例，您可以根据echarts的文档和您的实际需求来进一步配置和使用echarts图表。