Introduction

ECharts was originally developed by Baidu and later has been made part of the Apache Software Foundation. The parent company Apache, is the worlds largest open source foundation. ECharts is a a powerful, interactive charting and data visualization library without a steep learning curve.

Best of all,

The article below is a quick overview of the basic functionality of ECharts for React.

Source Files

GitHub

Libraries

echarts and echarts-for-react. An ReactJS library for ECharts.

npm i echarts echarts-for-react

Simple Bar Chart Component

Source Code

Code for a simple Bar Chart.

import React from 'react';
import ReactECharts from 'echarts-for-react';


export default function BarChart() {
  const option = {
    title: {
      text: 'Line Chart Example'
    },
    toolbox: {
        feature: {
            saveAsImage: {},
            dataZoom: {},
            restore: {}
        }
    },
    tooltip: {},
    legend: {
      data:['Label']
    },
    xAxis: {
      data: ['New York', 'Los Angeles', 'Singepore', 'Bangladesh', 'Saigon', 'Dallas']
    },
    yAxis: {},
    series: [{
      name: 'City',
      type: 'bar',
      data: [7890000, 6903000, 9039600, 14300000, 13230000, 6400000]
    }]
  };

  return (

    <ReactECharts
      option={option}
      style={{ height: 400 }}
      // opts={{ locale: 'FR' }}
    />

  )
}

Features

Below is a basic toolbox. Advanced features like data zoom would be enabled under this property.

Features -> saveAsImage: {}: Adds and can configure how to save the chart as an image.

Features -> restore: {}: To reload the chart. Not necessary for a small chart like the example below.

toolbox: {
  feature: {
       saveAsImage: {},
       restore: {}
   }
},

X Axis

The xAxis is where the label values are declared for this example. It can also display axis ticks, split lines, as well as an axis label.

xAxis: {
      data: ['New York', 'Los Angeles', 'Singepore', 'Bangladesh', 'Saigon', 'Dallas']
    },
yAxis: {},

Series

Under the series property there is name, type, and data. You can set the type to line,  bar,  pie,  scatter,  radar etc.

series: [{
   name: 'City',
   type: 'bar',
   data: [7890000, 6903000, 9039600, 14300000, 13230000, 6400000]
}]

Example: Change from type: ‘bar’, to type: ‘line’ and it renders a line chart.

series: [{
   name: 'City',
   type: 'line',
   data: [7890000, 6903000, 9039600, 14300000, 13230000, 6400000]
}]

Render Chart Component

Using ReactECharts component from echarts-for-react to render the graph. This library makes eCharts easily accessible to React.

 <ReactECharts
    option={option}
   style={{ height: 400 }}
 />

Simple Pie Chart Component

Source Code

Code for a simple Bar Chart.

import React from 'react';
import ReactECharts from 'echarts-for-react';

export default function PieChart() {

  const option = {
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    toolbox: {
      feature: {
          saveAsImage: {}                      
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  return (

    <ReactECharts
      option={option}
      style={{ height: 600 }}
      // opts={{ locale: 'FR' }}
    />

  )
}

Features

Below is a basic toolbox. Advanced features like data zoom would be enabled under this property.

 <ReactECharts
    option={option}
   style={{ height: 400 }}
 />

Features -> saveAsImage: {}: Adds and can configure how to save the chart as an image.

Features -> restore: {}: To reload the chart. Not necessary for a small chart like the example below.

Nightingale Rose Chart

Nightingale’s graph is like a pie chart, cut into equal angles. Slices advance in a clockwise direction.

Source Code

All the code for a Nightingale Chart.

import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts'

export default function NightingaleChart() {

  const option = {
    title: {
      text: 'Pie Flower',
      subtext: 'Fake Data',
      left: 'center'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: simpleChartData
      }
    ]
  };

  return (

    <ReactECharts
      option={option}
      style={{ height: 600, width: 700 }}
      // opts={{ locale: 'FR' }}
    />

  )
}

const simpleChartData = [
  { value: 40, name: 'rose 1' },
  { value: 38, name: 'rose 2' },
  { value: 32, name: 'rose 3' },
  { value: 30, name: 'rose 4' },
  { value: 28, name: 'rose 5' },
  { value: 26, name: 'rose 6' },
  { value: 22, name: 'rose 7' },
  { value: 18, name: 'rose 8' }
]

Features Property

In the series propery, enable roseType: ‘area’. The radius is adjusted to get the labels in view.

series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: simpleChartData
      }
 ]

Conclusion

The example is just the tip of the iceberg for what is available. Apache ECharts is one of the largest open source JavaScript visualization libraries out there and now you know how to use it with React. If this chart library peaks your interest, check out some of my other articles below.

Apache ECharts For React – Data Zoom

Apache ECharts For React – Bar to Pie Chart Transition Animation