Vue uses echarts chart common configuration detailed explanation

Official Website: Apache ECharts

1. Download dependencies:

cnpm install echarts

2. Import ECharts library:

import * as echarts from 'echarts'

3. Define a reference (ref) in the component. Declare the variable chartInstance.

(ref) is used to store ECharts instance. The variable chartInstance is used to store the ECharts chart instance, so that you can initialize, update and destroy the chart during the life cycle of the component. :

const chartInstance = ref(null);
let chartInstance;

4. Create an element in the component's template

This will serve as the container for the ECharts chart. In order to ensure that ECharts is initialized and destroyed at the right time, you can use Vue's life cycle hook function:

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

5. In the component, use onMountedthe hook to initialize the ECharts chart instance:

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

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

6. Finally, ensure that the ECharts instance is destroyed when the component is unloaded to prevent memory leaks:

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

7. The option object in ECharts is a configuration item object

Settings for defining aspects of the chart's appearance, data, interactions, and more. Some common data configurations in the option object are explained in detail below:

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]
    }
  ]
};

8. Detailed explanation of commonly used configuration items:

• title (title configuration):

  • text: The main title text, used to display the main title information at the top of the chart.
  • subtext: Subtitle text, which usually displays additional instructions or descriptions below the main title.

• tooltip (prompt box configuration):

  • trigger: Trigger type, specify when to display the prompt box, such as 'axis' (coordinate axis trigger) or 'item' (data item trigger).
  • axisPointer: Indicator configuration, used to control the style of the prompt box, such as 'line' (straight indicator) or 'shadow' (shadow indicator).

  • show:  Whether to display the prompt box.

  • position: The position of the prompt box, which can be pixel coordinates [x, y] or percentage [x%, y%], which is automatically determined according to the position of the trigger point by default.

  • formatter: The formatting function of the prompt box content, supports two forms of string template and function, and can customize the displayed content.

  • backgroundColor: The background color of the prompt box. Such as: '#fff'

  • borderColor: The border color of the prompt box.

  • textStyle: prompt box text style, including color and font size.

    • color: text color.
    • fontSize:  font size. Such as: 12

  • extraCssText: Extra CSS style, which can be used to customize the style of the prompt box. Such as: 'width: 100px; height: 50px;'

• legend (legend configuration):

  • data: The name of the legend item, used to identify the data series, displayed at the top or bottom of the chart.

• xAxis (x-axis configuration):

  • type: x-axis type, specify the type of x-axis, such as 'category' (category type) or 'value' (numeric type).
  • data: The data item of the x-axis. Depending on the type of the x-axis, it can be a data point of a category axis or a scale of a numeric axis.

• yAxis (y-axis configuration):

  • type: y-axis type, specify the type of y-axis, such as 'value' (numeric type) or 'category' (category type).

• series (data series configuration):

  • name: The name of the data series, which will be displayed in the legend to distinguish different data series. List.
  • type: The type of data series, specify the type of chart displayed, such as 'bar' (histogram) or 'line' (line chart).
  • data: The specific data of the data series, depending on the type of chart, it can be the height of the histogram, the point of the line chart, etc.

In addition to the above configuration items, ECharts also provides more configuration options for controlling the appearance, interaction, labels, styles, etc. of the chart. You can adjust the display effect of the chart by configuring the option object according to different needs. In actual use, you can find more configuration options and customize them according to the ECharts documentation.