Lately, I have been using echarts lot in my projects with react. So i decided to make a post on it.

ECharts, an open-sourced, web-based, cross-platform framework that supports the rapid construction of interactive visualization. It is used for making charts and there is a wide range of example in their examples page.

So in this tutorial, we will see how to use it in React. Further, i will also post how to use features of echarts such as making custom tools and many more.

Step 1 —
First, let’s create a blank react project
create-react-app echarts-demo

Step 2 —
Then cd into that project
cd echarts-demo
Then install dependencies by using below command —

npm install --save echarts-for-react
npm install --save echarts

Step 3 —
Open file src → App.js and replace all content of App.js with below code

import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
import "./App.css";
class App extends Component {
  getOption = () => ({
    title: {
      text: "JS Front End Frameworks",
      x: "center"
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: "vertical",
      left: "left",
      data: ["React", "Angular", "Vue"]
    },
    series: [
      {
        name: "JS FrontEnd",
        type: "pie",
        radius: "55%",
        center: ["50%", "60%"],
        data: [
          {
            value: 50,
            name: "React"
          },
          {
            value: 22,
            name: "Angular"
          },
          {
            value: 28,
            name: "Vue"
          }
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  });
  render() {
    return (
      <div className="App">
        <ReactEcharts option={this.getOption()} style={{ height: 300 }} />
      </div>
    );
  }
}
export default App;

Now run your program with
npm start
and you will see a pie chart.

In getOption method, we return an object which configures our charts. There are lot of configuration options for each chart which can be found in the documentation of echarts.

In render method, we return Echart Component with option props with getOption method.

We can also visit echarts examples page and click on any example which then opens the editor where we can see code and corresponding chart. We can play around with different options there and get options for that chart.

Later we will see how to make complex charts with echarts and how to create custom toolbox and much more about this library.