Data from back-end database shoule be displayed to the front-end in a visual way instead of just tabular format. Charting is a one of best data visualization technique. A chart is a graphical representation of data, in which "the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart". A chart can represent tabular numeric data, functions or some kinds of qualitative structure and provides different info.
ECharts is a set of front-end chart tool library originally developed by Baidu, Inc. Recently it was donated to apache foundation & it is open-sourced under Apache License 2.0. In this blog post, we are going to see how we are going to easily add echart charts to our web page.
echarts.init(document.getElementById('lineChart'));Here in the following we are going to see some samples charts and how to initialize them.
At first we are going to see the demo of how the bar chart works with the Echart and what are the configs need to be done.
Bar chart shows different data through the height of a bar, which is used in rectangular coordinate with at least 1 category axis.
Among the options very few are important, They are described below. These are the options which will be common for all chart type.
| Option | Object | Description |
|---|---|---|
| xAxis | xAxis.type(Type of axis) | The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. offset can be used to avoid overlap when you need to put more than two x axis. Default is 'category'. |
| xAxis.data | Provides the value range of the 'category' axis. | |
| yAxis | yAxis.type(Type of axis) | The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. offset can be used to avoid overlap when you need to put more than two y axis. Default is 'value'. |
| yAxis.data | If the data is not specified, it is auto collected from series.data | |
| series | series[i].data | The value that needs to be represented in the bar chart format. |
Broken line chart relates all the data points symbol by broken lines, which is used to show the trend of data changing. It could be used in both rectangular coordinate and polar coordinate.
The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.
