Basic Line Chart
Simple Example
We can use the following code to build a line chart which has x-axis as category
, y-axis as value
:
option = { xAxis: { type: 'category', data: ['A', 'B', 'C'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150], type: 'line' } ] };
In this case, we set the type of axis to category
and value
under xAxis
and yAxis
. We also clarified the content on the x-axis through data
. In series
, we set the type to line
, and specify the values of three points through data
. In this way, we got a simple line chart.
The
type
here can be omitted because the defaults of the axis arevalue
whilexAxis
has specified the category'sdata
. In this case,ECharts
can recognize that this is a category axis.
Line Chart in Cartesian Coordinate System
How to implement if we want the line chart to be continuous? The answer is simple, as long as every value in data
of the series
is represented by an array containing two elements.
option = { xAxis: {}, yAxis: {}, series: [ { data: [ [20, 120], [50, 200], [40, 50] ], type: 'line' } ] };
Customized Line Chart
Line Style
Line style can be changed by lineStyle
setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook series.lineStyle
to figure out.
Here is an example of setting color, line width and type.
option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { data: [10, 22, 28, 23, 19], type: 'line', lineStyle: { normal: { color: 'green', width: 4, type: 'dashed' } } } ] };
When we set the line width here, the line width of items will not change. The line style of items needs to be set separately.
Item Style
Item style can be change by series.itemStyle
. It included color
, borderColor
, borderStyle
, borderWidth
, borderType
, shadowColor
, opacity
and so on. It works the same as the lineType
, so we will not do further discuss.
Display Value on Items.
In the series, the label of the item was specified by series.label
. If we change the show
under label
to true
, the value will be displayed by default. Otherwise, if series.emphasis.label.show
is true
, the label will show only if the mouse moved across the item.
option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { data: [10, 22, 28, 23, 19], type: 'line', label: { show: true, position: 'bottom', textStyle: { fontSize: 20 } } } ] };
Empty Data
In a series
, there are empty data. It has some difference with 0
. While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by.
In ECharts, we use '-'
to represent null data, It is applicable for data in other series.
option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { data: [0, 22, '-', 23, 19], type: 'line' } ] };
Please note the difference between the empty data and 0.