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

小手冰渣凉

1287人浏览 · 2023-08-08 09:30:42

小手冰渣凉 · 2023-08-08 09:30:42 发布

官网：Apache ECharts

一、下载依赖：

cnpm install echarts

二、导入ECharts库：

import * as echarts from 'echarts'

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

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

const chartNf= ref(null);
let chartInstance;

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

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

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

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

onMounted(() => {
  // 初始化ECharts图表
  chartInstance = echarts.init(chartNf.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'（数值型）。
- axisLabel: { interval: 0 } 名字之间的间隔。
- data: x轴的数据项，根据x轴类型不同，可以是类别型轴的数据点或数值型轴的刻度。
yAxis（y轴配置）：
- type: y轴类型，指定y轴是何种类型，如 'value'（数值型）或 'category'（类别型）。
series（数据系列配置）：
- name: 数据系列的名称，将显示在图例中，用于区分不同的数据系列。列。
- type: 数据系列的类型，指定展示的图表类型，如 'bar'（柱状图）或 'line'（折线图）。
- barMaxWidth: bar最大宽度如 '40'。
- data: 数据系列的具体数据，根据图表类型不同，可以是柱状图的高度、折线图的点等