Steps to use ECharts in Vue3 project

echarts official website

Apache ECharts

Install ECharts using commands in Vue3

npm install echarts

Import echarts where you need to use

import * as echarts from 'echarts'; // Import ECharts Library

Create responsive references that store DOM elements

// Create a responsive reference of Vue to store references to DOM elementsconst chartRef = ref<HTMLDivElement | null>(null);

<HTMLDivElement | null>：refGeneric parameters<HTMLDivElement | null>DesignatedchartRefThe type of value that can be held. Here,chartRefCan holdHTMLDivElementObject of type ornull。HTMLDivElementis a type of DOM element, which refers to a<div>Elements;

(null): means that the initial value of chartRef is null

Create a div to store charts

<template>
  <!-- use ref Will chartRef Bind to this div element -->
  <div ref="chartRef" style="width: 100%; height: 50vh;"></div>
</template>

Define configuration options for ECharts

const chartOptions = {
  title: {
    text: 'Simple bar chart example' // Title of the chart  },
  tooltip: {}, // Enable the tooltip function of charts  legend: {
    data: ['Sales'] // The item name displayed in the legend  },
  xAxis: {
    data: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'] // X-axis category data  },
  yAxis: {}, // The Y-axis configuration item is used, using the default configuration  series: [
    {
      name: 'Sales', // Name of the data series      type: 'bar', // The chart type is a bar chart      data: [5, 20, 36, 10, 10] // Specific data of the data series    }
  ]
};

Here are some explanations of configuration options

• title：

  • text: Title text, such as"Sales Report"
  • subtext: Subtitle text, such as"2024 Q1"
  • left、top、right、bottom: The title position can beauto、center、left、right、top、bottomwait.

• tooltip：

  • trigger: The trigger method can beitem(trigger data item) oraxis(Trigger axes).
  • formatter: Prompt box formatting function, which can be a string template or function.
  • backgroundColor: Background color, such as'#fff'or'rgba(0,0,0,0.7)'。

• legend：

  • data: Legend data array, e.g.['Sales', 'Revenue']。
  • orient: Legend layout direction,'horizontal'(level) or'vertical'(vertical).
  • left、top、right、bottom: The location of the legend.

• xAxisandyAxis：

  • type: The axis type, can be'value'(numerical type),'category'(Category type),'time'(Time type) or'log'(logarithmic).
  • data(Category type only): Array of tick labels, such as['Jan', 'Feb', 'Mar']。
  • name: The coordinate axis name, such as'Sales'。
  • axisLabel: Axis label configuration, includingformatter(Label formatting function).

• series：

  • type: Chart type, e.g.'line'(line chart),'bar'(History chart),'pie'(Pie Chart).
  • data: Data array, such as[120, 200, 150, 80, 70]。
  • name: Series name, such as'Sales'。
  • itemStyle: Series item style configuration, includingcolor(color),borderColor(Border color).

• grid：

  • left、top、right、bottom: The margin of the grid, for example40、60。
  • containLabel: Whether to include axis labels within the grid range,trueorfalse。

• color：

  • color: The color array of the chart, such as['#3398DB', '#FF5722'], affects the color of the series.

• dataZoom：

  • type: Data scaling type,'inside'(Internal Scaling) or'slider'(Slider zoom).
  • startandend: The start and end percentage of the zoom range, such as0and100。

• toolbox：

  • show: Whether to display the toolbox,trueorfalse。
  • feature: Toolbox functions, such assaveAsImage(Save as picture),dataView(Data view).

These options can be combined to achieve rich chart effects and interactions. You can also see the examples on the official website.Apache ECharts。

Initialize the ECharts instance and set chart configuration items

// Lifecycle hook executed after component mountonMounted(() => {
  // Make sure that chartRef is bound to a DOM element  if () {
    // Initialize the ECharts instance and pass in the DOM element    const chartInstance = ();
    // Set the configuration items of the chart    (chartOptions);
  }
});

This allows you to use simple ECharts

Summarize

This is the end of this article about using ECharts in the Vue3 project. For more related content about using ECharts in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!