Creating Apache ECharts: A Step-by -Step Guide.
What is Apache ECharts?
Apache ECharts is an open-source data visualization library, written in JavaScript, that allows you to create and add customizable and interactive charts and graphs to your web applications. The ECharts library can create many different types of charts, with the ECharts website providing a plethora of clear and concise documentation and examples for use on its website.
Getting to Grips with ECharts.
ECharts have been widely adopted across industries as a visually appealing means of presenting data. They offer an intuitive and flexible solution with an attractive and elegant design, and for this reason, many assume that creating one requires some specialist knowledge, or at least a considerable time commitment. Yet, creating ECharts does not need to be an over- complicated process. You can achieve an impressive output by following some simple, easy to follow guidelines. Below, we will take you through the steps of setting-up an ECharts user basic bar chart in an Angular Project/Component from scratch.
A Step-by-Step Guide: How to Set-Up ECharts with Angular CLI.
- First, let’s set up a project to work in. We use the Angular CLI to create a new project for this example; “echarts-project”.
2. Next, we need to navigate to the new project and serve the project using ng s.
3. Then, navigating to localhost:4200, we see that the project is set up and working!
4. Now, we can delete the autogenerated placeholder content in app.component.html, to create a fresh blank application to work on for the example.
5. At this point we will install ECharts via npm, and then also ngx-echarts (https://www.npmjs.com/package/ngx-echarts), which is an angular directive – as we are using it in an angular project, it makes this a lot more straightforward.
You can find out what version of ngx-echarts you will need to get on the package site above!
We can install these by running:
npm install echarts
npm install ngx-echarts
In the app.module.ts file, we must then add an import for ngx-echarts.
In the case of this example, we are putting the chart on the main app.component. Just as easily it can be put into its own component.
6. We create a div to become the chart in the app.component.html, and set it as an EChart by providing it with the EChart directive. We also provide the options for the chart by binding it to the options input on the div. In this example, we also set the height and width of the chart via the div’s styling.
7. Here, we must set up the options to pass to this EChart in the script for this component.
In the app.component.ts here, we set up some static data – parts, and then configure the EChart options object that is bound to the EChart div in the html. This configuration is very bare bones. Additional styles and features can be set but are outside the scope of this example. In this case, for our array of parts, we want to display each as a bar labelled with the part name, and have the bar represent the number of parts that were produced.
Data-wise, these are arrays that are in the options, the xAxis data being the names which we get from our list of parts via map(), and the data provided to the series as a series named “Part”, which comes from the values for amount Produced also via map(). The order of these matches one another.
8. Now, when we serve our application and view it, we can see our chart
Et Voila, a very basic chart, showing the straight forward process of integrating ECharts into an Angular App!
Conclusion
ECharts offer an intuitive and flexible solution with an attractive and elegant design. We have shown that creating them does not need to be an exhaustive process, and that you can achieve an impressive output by following some simple steps. Dataworks highly skilled team of software developers have the experience and expertise to help your business take full advantage of tools like Apache ECharts to help maximise your organisations’ competitiveness and performance.
If would like to learn more and discuss how we can help deliver real benefits to your business, please contact us today or call us on 051 878555.
To stay up to date with Dataworks Limited news and events, connect with us via the links below:
DATAWORKS – Driving Digital Transformation in the worlds’ Leading Life Science Co