vue图表

// 使用 Vue 和 ECharts 创建一个简单的图表示例

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

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

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

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

    // 使用配置项设置图表
    chart.setOption(option);
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了一个 div 元素作为 ECharts 图表的容器，并通过 ref="chart" 绑定到组件实例上，以便在 JavaScript 中引用。

2. 脚本部分 (<script>):

   • 引入了 ECharts 库。
   • 在 mounted 生命周期钩子中初始化 ECharts 实例，并通过 this.$refs.chart 获取图表容器元素。
   • 定义了图表的配置项 option，包括标题、提示框、X 轴数据、Y 轴和系列数据。
   • 使用 chart.setOption(option) 方法将配置项应用到图表实例上。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加自定义样式，这里留空。

这个示例展示了如何使用 Vue 和 ECharts 创建一个简单的柱状图。你可以根据实际需求修改配置项和样式。