Hey! Have you ever needed to visualize data on a website or web application? Maybe you're working on a project and want to display some stats or trends to your users. Well, that's where ECharts comes in handy!
ECharts is a free and open-source data visualization library that allows you to create stunning charts and graphs to display your data in a visually appealing way. It supports a wide range of chart types, including line charts, bar charts, pie charts, scatter plots, and many more. And the best part? It's highly customizable and can handle large datasets, making it a popular choice for data visualization in various industries.
If you're building a web application with React, integrating ECharts is easy thanks to the React wrapper for ECharts. In this post, I'll walk you through the process of installing and setting up ECharts with React. And together, we'll create some amazing charts and visualizations with just a few lines of code.
Whether you're a beginner or an experienced developer, this post will give you a solid foundation for using ECharts with React and help you take your data visualization to the next level. So, let's dive in and get started!
Step 1: Step up the local server.
- I used Next.js in my project, thus download it from https://nodejs.org/en
- Run
npx create-next-appto create project and then runnpm run devto start the server - Since we are using React, we need to install a react-version Echart running command
npm install --save echarts-for-react - Then we import the main Echart component into the page
import ReactEcharts from "echarts-for-react"- Now, we are ready to go!
Step 2: Basics about Chart.
ReactEcharts offers very convenient way to manage data and the component it self. One the key thing about it is to define a JavaScript object to store options for a chart that will be displayed using the ECharts library. All we need to do next is to pass it into the ReactEcharts component.
The below is an example of this it works in Echarts:
const options = {
'this is where to put all chart data, style, setting, and etc..'
}
Becomes
<ReactEcharts option={options} />
Step 3: Demo.
Here is a demo I wrote to display the favorite food among my SI 579 friends. The graph is a standard bar graph.
export default function Home() {
const options = {
title : {
text: 'My friend\'s favorite food.',
subtext: '*Fake',
x:'center'
},
tooltip : {
trigger: 'item'
},
xAxis: {
name: 'Food Choice',
data: ['Orange', 'Apple', 'Lychee', 'Banana', 'Grape', 'Strawberry']
},
yAxis: { name: 'Number of picks', },
series: [
{
type: 'bar',
data: [12, 30, 25, 54, 13, 23, 43]
}
]
};
return (
<>
<Head>
<title>Create Next App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<h1>Bar Graph</h1>
<br />
<ReactEcharts option={options} />
</>
)
}
Here is a explanation about the code block above:
- Option: option is the object to store chart data related information.
- Title: setup the title section of the chart
- Tooltip: interactive information
- x&y Axis: legends and names
- series : where data is actually stored
- Type: the type of chart displayed
FYI: Key Concept.
Echart has two types of data management format, one is under series, which is suitable for graph customization or large data, the other is under dataset, which works better in general since it can be reused by multiple components.
Series:
Dataset:
In conclusion, ECharts is a powerful and flexible data visualization library that can help you create stunning charts and graphs for your web application. And with the React wrapper for ECharts, it's easy to integrate ECharts into your project and start visualizing your data in no time.
Throughout this post, we've covered the basics of ECharts and React integration, and we've shown you how to create some beautiful charts and visualizations using just a few lines of code. We hope this has been a helpful introduction to ECharts and data visualization in general, and that you're excited to continue exploring this topic further.
Remember, data visualization is a crucial skill for any programmer or developer, and it can open up new opportunities and insights for your projects. So, keep practicing and experimenting with different chart types and styles, and don't hesitate to share your creations with the world.
Thanks for reading!
References
- Echarts JS based Docs: Apache Software Foundation. (2021). Get Started with ECharts. Retrieved from https://echarts.apache.org/handbook/en/get-started.
- Properties Guide: Apache Software Foundation. (2021). Title Configuration - ECharts Option. Retrieved from https://echarts.apache.org/zh/option.html#title.
- React based Live Demo: HUST (2021). Event Handling - ECharts for React Examples. Retrieved from https://git.hust.cc/echarts-for-react/examples/event.
- React version instruction: HUST. (2021). ECharts for React. GitHub. Retrieved from https://github.com/hustcc/echarts-for-react.
Top comments (0)