vue 使用echarts图表 常用配置详解

官网：Apache ECharts

一、下载依赖：

cnpm install echarts

二、导入ECharts库：

import * as echarts from 'echarts'

三、在组件中定义一个引用（ref）。声明变量chartInstance。

(ref)用于存储ECharts实例。 chartInstance这个变量用来存储 ECharts 图表实例，以便你在组件的生命周期内可以进行图表的初始化、更新和销毁操作。：

const chartInstance = ref(null);
let chartInstance;

四、在组件的模板中创建一个元素

这将作为ECharts图表的容器。为了确保ECharts在正确的时机进行初始化和销毁，你可以使用Vue的生命周期钩子函数：

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

五、在组件中，使用onMounted钩子来初始化ECharts图表实例：

onMounted(() => {
  // 初始化ECharts图表
  chartInstance = echarts.init(chartContainer.value);

  // 根据需要设置图表的配置项和数据
  const options = {
    // ...
  };
  
  // 渲染图表
  chartInstance.setOption(options);
});

六、最后，确保在组件被卸载时销毁ECharts实例，以防止内存             泄漏：

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});

七、ECharts中的option对象是一个配置项对象

用于定义图表的外观、数据、交互等各方面的设置。下面详细解释option对象中常见的一些数据配置：

const options = {
  // 标题配置
  title: {
    text: '图表标题',
    subtext: '副标题'
  },
  // 提示框配置，用于显示交互时的信息
  tooltip: {
    trigger: 'axis',  // 鼠标触碰触发类型，可以是 'axis', 'item' 等
    // ...
  },
  // 图例配置，用于标识数据系列
  legend: {
    data: ['系列1', '系列2'] // 图例项的名称
  },
  // x轴配置
  xAxis: {
    type: 'category',  // x轴类型，可以是 'category', 'value', 'time' 等
    data: ['数据点1', '数据点2', '数据点3'] // x轴的数据项，例如类别型轴的数据点
  },
  // y轴配置
  yAxis: {
    type: 'value',  // y轴类型，可以是 'value', 'category', 'time' 等
    // ...
  },
  // 数据系列配置，用于定义不同的数据系列
  series: [
    {
      name: '系列1', // 数据系列的名称，将显示在图例中
      type: 'bar',  //  数据系列的类型，指定展示的图表类型，如 'bar'或 'line'
      data: [10, 20, 30] // 数据系列的具体数据
    },
    {
      name: '系列2',
      type: 'line',
      data: [15, 25, 35]
    }
  ]
};

八、常用配置项的详细解释 ：

• title（标题配置）：

  • text: 主标题文字，用于在图表顶部显示主要的标题信息。
  • subtext: 副标题文字，通常在主标题下面显示额外的说明或描述。

• tooltip（提示框配置）：

  • trigger: 触发类型，指定何时显示提示框，如 'axis'（坐标轴触发）或 'item'（数据项触发）。
  • axisPointer: 指示器配置，用于控制提示框的样式，如 'line'（直线指示器）或 'shadow'（阴影指示器）。

  • show: 是否显示提示框。

  • position: 提示框位置，可以是像素坐标 [x, y] 或百分比 [x%, y%]，默认根据触发点位置自动确定。

  • formatter: 提示框内容的格式化函数，支持字符串模板和函数两种形式，可以自定义显示的内容。

  • backgroundColor: 提示框的背景颜色。如：'#fff'

  • borderColor: 提示框的边框颜色。

  • textStyle: 提示框文字样式，包括颜色和字体大小。

    • color: 文字颜色。
    • fontSize:  字体大小。 如：12

  • extraCssText: 额外的 CSS 样式，可以用于自定义提示框的样式。 如：'width: 100px; height: 50px;'

• legend（图例配置）：

  • data: 图例项的名称，用于标识数据系列，显示在图表的顶部或底部。

• xAxis（x轴配置）：

  • type: x轴类型，指定x轴是何种类型，如 'category'（类别型）或 'value'（数值型）。
  • data: x轴的数据项，根据x轴类型不同，可以是类别型轴的数据点或数值型轴的刻度。

• yAxis（y轴配置）：

  • type: y轴类型，指定y轴是何种类型，如 'value'（数值型）或 'category'（类别型）。

• series（数据系列配置）：

  • name: 数据系列的名称，将显示在图例中，用于区分不同的数据系列。列。
  • type: 数据系列的类型，指定展示的图表类型，如 'bar'（柱状图）或 'line'（折线图）。
  • data: 数据系列的具体数据，根据图表类型不同，可以是柱状图的高度、折线图的点等

除了上述配置项外，ECharts还提供了更多的配置选项，用于控制图表的外观、交互、标签、样式等。你可以根据不同的需求，通过配置option对象来调整图表的展示效果。在实际使用中，你可以根据ECharts的文档查找更多的配置选项并进行定制。