ECharts 快速上手

Apache ECharts 是一个由 Apache 软件基金会孵化并维护的开源可视化图表库。ECharts 拥有强大的数据可视化功能，支持多种图表类型，并且易于与各种前端框架集成，广泛应用于数据分析和展示中。

前言

Apache ECharts 官方文档：https://echarts.apache.org/zh/index.html (opens new window)

1. 安装 Apache ECharts

在项目中使用 ECharts 之前，需要先将其安装到项目中。可以通过 npm 或 yarn 进行安装。

通过 npm 安装

npm install echarts --save

通过 yarn 安装

yarn add echarts

2. 引入 ECharts

在项目的 Vue 组件或 JavaScript 文件中引入 ECharts，并初始化一个简单的图表。

import * as echarts from 'echarts';

export default {
  mounted() {
    // 1. 基于准备好的 DOM，初始化 ECharts 实例
    const myChart = echarts.init(document.getElementById('main'));

    // 2. 指定图表的配置项和数据
    const option = {
      title: {
        text: 'ECharts 入门示例' // 图表标题
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X 轴数据
      },
      yAxis: {},
      series: [{
        name: '销量', // 系列名称
        type: 'bar', // 图表类型：柱状图
        data: [5, 20, 36, 10, 10, 20] // 数据
      }]
    };

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

3. 与 Vue 集成

在 Vue 中集成 ECharts 时，建议将 ECharts 封装成一个 Vue 组件，以便于在项目中复用。

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

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

export default {
  mounted() {
    // 组件挂载后，初始化图表
    this.initChart();
  },
  methods: {
    // 初始化图表方法
    initChart() {
      // 1. 获取 DOM 节点，初始化 ECharts 实例
      const chart = echarts.init(this.$refs.chart);

      // 2. 定义图表的配置项和数据
      const option = {
        title: {
          text: 'ECharts Vue 示例' // 图表标题
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X 轴数据
        },
        yAxis: {},
        series: [{
          name: '销量', // 系列名称
          type: 'bar', // 图表类型：柱状图
          data: [5, 20, 36, 10, 10, 20] // 数据
        }]
      };

      // 3. 设置图表的配置项和数据
      chart.setOption(option);
    }
  }
};
</script>

4. 封装 ECharts 组件

在封装 ECharts 组件 (EChartsComponent.vue) 时，我们将配置项 options、图表的宽度 width 和高度 height 作为 props 传递给组件。通过这种方式，外部组件可以灵活地配置和使用该图表组件。此组件还提供了事件监听功能，便于外部组件捕捉图表事件。

组件 props 说明

• options：图表的配置项，是一个对象类型的 prop，用于设置图表的各个部分（如标题、图例、轴、数据系列等）。该 prop 必须传入。
• width：图表的宽度，默认值为 600px。可以传入字符串类型的值（如 '600px'、'100%'），以调整图表的宽度。
• height：图表的高度，默认值为 400px。该 prop 也接受字符串类型的值，可以用来设置图表的高度。
• onChartClick：图表的点击事件处理函数，作为 prop 传递，用于在图表上注册点击事件监听器。

ECharts 组件代码

<template>
  <!-- 创建图表容器，设置图表的宽度和高度 -->
  <div ref="chart" :style="{ width: width, height: height }"></div>
</template>

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

export default {
  props: {
    options: { 
      type: Object, 
      required: true // 接收图表的配置项，必须传入
    },
    width: { 
      type: String, 
      default: '600px' // 图表宽度，默认为600px
    },
    height: { 
      type: String, 
      default: '400px' // 图表高度，默认为400px
    },
    onChartClick: {
      type: Function,
      default: null // 点击事件处理函数，可选
    }
  },
  mounted() {
    this.initChart(); // 组件挂载后初始化图表
  },
  methods: {
    /**
     * 初始化 ECharts 图表实例
     */
    initChart() {
      const chart = echarts.init(this.$refs.chart); // 初始化 ECharts 实例
      chart.setOption(this.options); // 设置图表配置项

      if (this.onChartClick) {
        chart.on('click', this.onChartClick); // 如果传入了 onChartClick 函数，注册点击事件
      }
      this.chart = chart; // 保存实例，便于后续操作
    },
    /**
     * 更新图表配置项
     * @param {Object} newOptions 新的配置项
     */
    updateChart(newOptions) {
      if (this.chart) {
        this.chart.setOption(newOptions, true); // 更新图表配置项
      }
    },
    /**
     * 销毁 ECharts 实例，避免内存泄漏
     */
    destroyChart() {
      if (this.chart) {
        this.chart.dispose(); // 销毁图表实例
      }
    }
  },
  watch: {
    options: { 
      deep: true, 
      handler(newOptions) {
        this.updateChart(newOptions); // 监听 options 变化，更新图表
      }
    }
  },
  beforeDestroy() {
    this.destroyChart(); // 组件销毁前，销毁图表实例
  }
};
</script>

<style scoped>
/* 设置图表容器的样式，确保宽度和高度 */
div[ref="chart"] {
  width: 100%;
  height: 100%;
}
</style>

5. 使用封装的 ECharts 组件

• 在使用该封装组件时，需要传入图表的配置项 options，以及可选的 width 和 height。如果你希望处理图表的事件，比如点击事件，可以通过 onChartClick prop 传入一个处理函数。
• 如果你希望图表能够自适应容器的宽度或高度，可以将 width 和 height 设置为 '100%'，这样图表将根据其父容器的尺寸进行自适应。

<template>
  <div>
    <!-- 使用封装的 ECharts 组件 -->
    <EChartsComponent 
      :options="chartOptions" 
      :width="'100%'" 
      :height="'400px'" 
      :onChartClick="handleChartClick"
    />
  </div>
</template>

<script>
import EChartsComponent from './components/EChartsComponent.vue'; // 引入封装的 ECharts 组件

export default {
  components: {
    EChartsComponent
  },
  data() {
    return {
      // 图表的配置项
      chartOptions: {
        title: {
          text: 'ECharts Vue 示例', // 图表标题
        },
        tooltip: {
          trigger: 'axis' // 提示框触发类型
        },
        xAxis: {
          type: 'category', // X轴类型：类目轴
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X轴数据
        },
        yAxis: {
          type: 'value' // Y轴类型：数值轴
        },
        series: [{
          name: '销量', // 数据系列名称
          type: 'bar', // 图表类型：柱状图
          data: [5, 20, 36, 10, 10, 20] // 数据系列数据
        }]
      }
    };
  },
  methods: {
    /**
     * 处理图表点击事件
     * @param {Object} params 图表点击事件参数
     */
    handleChartClick(params) {
      // 处理点击事件
      console.log('图表被点击:', params);
      alert(`点击了 ${params.name} 的数据，值为 ${params.value}`);
    }
  }
};
</script>