APACHE ECHARTS

Apache ECharts, also known as Apache ECharts (incubating), is an open-source data visualization and charting library for web applications.

Prerequisites

Before you get started, ensure that you have the following prerequisites installed on your system:

• Node.js v20.9.0 or above

• npm or Yarn package manager

• Vue CLI

Installation

npm install echarts

Install ECharts package from the npm registry to project's node_modules directory, and make it available for use in JavaScript code.

Define Chart Container

In Vue 3 component's template section, create a div element that will serve as the container for ECharts chart.

There are two ways to define the container:

$refs method

<div ref="echartsContainer" style="width: 100%; height: 300px;"></div>

Element ID method

<div id="echartsContainer" style="width: 100%; height: 300px;"></div>

Access chart container

after define the container, you can now access the container in<script>

There are two ways to access chart container:

$refs method

chartContainer = this.$refs.echartsContainer;

Element ID method

chartContainer = document.getElementById('echartsContainer');

Initialize an ECharts instance

Using echarts.init() method to initialize the ECharts instance and bind it to a DOM element

const chart = echarts.init(chartContainer);

Define and Set the Chart Options

// Define your chart options
const options = {
  title: {
    text: 'My ECharts Chart',
  },
  // Customize your chart options here (See example below)
};

  // Set the chart options
  chart.setOption(options);

Examples of ECharts Usage

Example 1 : Stacked Line Chart

const option = {
  title: {
    text: 'Temperature' // chart title
  },
  tooltip: {
    trigger: 'axis' // hover information
  },
  legend: {
    data: ['Temp 1', 'Temp 2', 'Temp 3', 'Temp 4'] // small box that typically appears above or beside the chart.
  },
  grid: {
    left: '3%', // Left Padding
    right: '4%', // Right padding
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    // x-axis data, you can also put array variable name
    data: ['11:00 a.m.', '12:00 p.m.', '1:00 p.m.', '2:00 p.m.', '3:00 p.m.']
  },
  yAxis: {
    type: 'value' // Indicates that the y-axis displays continuous numerical values
  },
  series: [ // series here is put the y-axis data
    { 
      name: 'Area 1', // name of the series
      type: 'line', // type of chart
      data: [32, 30, 31, 32, 30]  //data points of this series
    },
    { name: 'Area 2', type: 'line', data: [17, 18, 16, 15, 14] },
    { name: 'Area 3', type: 'line', data: [25, 24, 26, 24, 23] },
    { name: 'Area 4', type: 'line', data: [31, 29, 32, 32, 29] },
  ]
};

Stack Line Chart of Four Sample Area's Temperature Data

Example 2: Pie Chart

const option = {
  title: {
    text: 'No. of Part Ordered', // chart main title
    subtext: 'Stirpot', // subtext below title
    left: 'center' // position of title
  },
  tooltip: {
    trigger: 'item' // hover information
  },
  legend: {
    orient: 'vertical', // orientation of the legend
    left: 'left' // position of legend
  },
  series: [
    {
      name: 'Stirpot', // name of the series
      type: 'pie', // type of chart
      radius: '50%', // set the size of pie chart
      data: [  // data points of this series
        { value: 300, name: '4t拌锅' },
        { value: 250, name: '5t拌锅' },
        { value: 150, name: '6t拌锅' },
      ],
    },
  ]
};

Pie Chart of Number of Stirpot Ordered

Example 3: Bar Chart

const option = {
  title: {
    text: 'No. of Part Ordered', // chart main title
    subtext: 'Regenerative Drying Drum', // subtext below title
    left: 'center' // position of title
  },
  tooltip: {
    trigger: 'axis', // hover information
    axisPointer: {
      type: 'shadow' //apply shadow effect when hover
    }
  },
  grid: {
    left: '3%', // Left Padding
    right: '4%', // Right padding
    containLabel: true
  },
  xAxis: [ // x-axis data
    {
      type: 'category',
      data: ['G220型', 'G250_11型', 'G250_14型', 'G280型'],
      axisTick: {
        alignWithLabel: true // Aligns the axis ticks with the category labels
      }
    }
  ],
  yAxis: [
    {
      type: 'value' // Indicates that the y-axis displays continuous numerical values
    }
  ],
  series: [
    {
      name: 'Regenerative Drying Drum', //name of the series
      type: 'bar', // type of chart
      barWidth: '60%', // width of bar in chart
      data: [200, 220, 150, 190] // data points of this series
    }
  ]
};

Bar Chart of Number of Regenerative Drying Drum Ordered

You can consult the Documentation in Apache ECharts Website for more advanced configurations !