Vue组件使用echarts的代码示例

以下是一个使用 Vue 和 echarts 的组件示例：

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

<script>
import echarts from 'echarts'

export default {
  name: 'EchartDemo',
  mounted() {
    // 初始化 echarts 实例
    const chart = echarts.init(this.$refs.chart);

    // 配置项
    const option = {
      // 省略部分配置项...
      series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        data: [
          {value: 235, name: '视频广告'},
          {value: 274, name: '联盟广告'},
          {value: 310, name: '邮件营销'},
          {value: 335, name: '直接访问'},
          {value: 400, name: '搜索引擎'}
        ]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);
  }
}
</script>

在这个示例中，我们首先通过 `import` 引入了 echarts，并在 `mounted` 钩子函数中初始化了 echarts 实例，并使用 `setOption` 方法将配置项和数据传递给 echarts 实例，最后将 echarts 实例挂载到组件的 `div` 元素上。这样就可以在 Vue 组件中使用 echarts 绘制图表。