vue 图表组件

<template>
  <div>
    <!-- 图表容器 -->
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

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

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: 'ECharts 示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };

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

<style scoped>
/* 可以根据需要添加样式 */
</style>

解释说明：

• 模板部分 (<template>):

  • 创建了一个 div 容器，用于放置图表。通过 ref="chart" 绑定一个引用，以便在 JavaScript 中获取该元素。

• 脚本部分 (<script>):

  • 引入了 ECharts 库。
  • 在组件挂载完成后 (mounted 钩子)，初始化图表实例并将其绑定到 div 容器上。
  • 配置图表的选项（标题、提示框、X 轴数据、Y 轴数据、系列数据等），然后使用 setOption 方法将配置应用到图表实例中。

• 样式部分 (<style scoped>):

  • 可以根据需要为图表容器添加样式，这里没有具体样式，可以根据实际情况进行调整。

这个示例展示了如何在一个 Vue 组件中集成 ECharts 图表，并展示一个简单的柱状图。