Echart.js draws a line chart

1 every profile

Echart is a report view JS plug-in developed by Baidu research and development team. It has very powerful functions and is friendly to developers and users.

  • Every download address: echarts.baidu.com/download.ht…

  • Every official website: www.echartsjs.com/index.html

  • The demo list: echarts.apache.org/examples/zh…

Example line chart

Each example has a corresponding code that you can just pull off and use.

Important properties in option

Echart call is very simple, just introduce echart.js library, call the relevant init method, set the configuration items to get the graph.

Let chart = echarts.init(myChartDom) // Initialize the canvas node chart.setoption (options) // draw configuration items on the canvasCopy the code

  • Title: Writes the title with the following attributes

  • Show :false/true Whether the title is displayed;

  • Text: title content; Textstyle modifies the header style

  • -Leonard: Subtext? SubtextStyle modifies the subtitle style;

  • The legend component represents different sets of symbols, colors, and names.

  • Show :false/true Whether to display;

  • Data: data array of legends;

  • Grid: drawing grid in rectangular coordinate system. A grid can place up and down X axes and left and right Y axes at most. You can draw line charts, bar charts, scatter charts on the grid;

  • Show :false/true Whether to display;

  • Top, left, right, bottom Mark the left, right, and bottom margins;

  • XAxis: X axis in the rectangular coordinate system grid. A grid component can put a maximum of two X axes up and down.

  • Type: specifies the type of the coordinate axis.

  • ‘value’ value axis, for continuous data.

  • ‘Category ‘category axis, applicable to discrete category data for which category data must be set through Data.

  • The ‘time’ time axis, which is used for continuous sequential data, has a time format compared to the numerical axis, and scales are calculated differently, such as month, week, day, or hour scales depending on the span.

  • Data: Category data, valid in the category axis (type: ‘category’).

  • YAxis: Y axis in the rectangular coordinate system grid. A grid component can place a maximum of two Y axes.

  • Type: specifies the type of the coordinate axis.

  • ‘value’ value axis, for continuous data.

  • ‘Category ‘category axis, applicable to discrete category data for which category data must be set through Data.

  • The ‘time’ time axis, which is used for continuous sequential data, has a time format compared to the numerical axis, and scales are calculated differently, such as month, week, day, or hour scales depending on the span.

  • DataZoom: The component is used to zoom in and out of the data so that you can focus on details of the data or see the data as a whole

  • type:slider; Whether to display components. If set to false, it will not be displayed, but data filtering will still exist.

  • BackgroundColor: backgroundColor of the component.

  • Realtime: whether to update series views in realtime while dragging. If set to false, updates are only made when the drag ends.

  • Top, left, right, bottom Mark the left, right, and bottom margins;

  • Tooltip: Tooltip component

  • Show: false/true Whether to display;

  • Trigger: Indicates the trigger type.

  • ‘item’ : data item graph trigger, mainly used in scatter charts, pie charts and other non-category axis charts.

  • ‘Axis’ : Axes trigger, mainly used in bar charts, line charts, etc. that use category axes.

  • Color: Palette color list. If the series does not have a color set, the color is iterated from the list as the series color.

    The default value is: [‘ # c23531 ‘, ‘# 2 f4554’, ‘# 61 a0a8’, ‘# d48265’, ‘# 91 c7ae’, ‘# 749 f83’, ‘# ca8622’, ‘# bda29a’, ‘# 6 e7074’, ‘# 546570’, ‘# c4ccd3];

  • Seriers: List of series. Each series determines its own chart type by type;

  • Series [I] – line: a line

  • ItemStyle: the style of the inflection mark;

  • Series [I]-bar: A bar graph showing the size of data by the height of the bar, used in rectangular coordinates with at least one category axis.

Option sample

Line chart of temperature change

Option = {title: {text: 'Temperature change in the next week ', subtext:' Fiction '}, Tooltip: {trigger: 'axis'}, legend: {data: [' Max temperature ', 'min temperature ']}, Toolbox: {show: true, feature: {dataZoom: {yAxisIndex:' None '}, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: False, data: [' Monday ', 'on Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday' ']}, yAxis: {type: 'value', axisLabel: {formatter: '{value} °C'}}, series: [{name: 'Max temperature ', type: 'line', data: [10, 11, 13, 11, 12, 12, 9], markPoint: {data: [{type: 'Max' name: 'maximum}, {type: "min", name:' minimum '}]}, markLine: {data: [{type: 'business' name: 'average'}}}, {name: 'lowest temperature, type:' the line 'data: [1, 2, 2, 5, 3, 2, 0], markPoint: {data: [{name:' weeks minimum, value: 2, xAxis: 1, yAxis: 1.5}}], markLine: {data: [{type: 'business' name: 'average'}, [{symbol: 'none', x: '90%' yAxis: 'Max'}, {symbol: 'circle', label: {position: 'start', the formatter: 'maximum}, type:' Max 'name:' the highest '}]]}}};Copy the code

image-20210823180507254

Line chart in the project

In some of the projects I’ve encountered, there are requirements that echart.js can comfortably solve, so here are some of them.

Zoom out implementation

Realize the point

  • Use the dataZoom configuration item in the options configuration of echart.js

Label implementation

Realize the point

  • Gets the last data in the current data list when the button is pressed

  • Keep the labeled data of each line and control the corresponding relationship

  • Each time you refresh the drawing, draw in all the markers

Data fusion implementation

Realize the point

  • Collect all the data from the two lines into one object

  • Re-render a canvas and draw all the data on the canvas

  • Control the unfolding and retracting of each canvas through buttons

Option is configured as follows.

option = { "grid": { "left": "10%", "right": "10%", "bottom": "40%", "top": "10%" }, "dataZoom": { "type": "slider", "show": true, "start": 0, "end": 100, "height": 16, "bottom": "5%" }, "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross", "animation": false, "label": { "backgroundColor": "#505765" } } }, "xAxis": [ { "type": "category", "boundaryGap": false, "axisLine": { "onZero": false }, "data": [" 00:00:07 00:00:23 ", ""," 00:00:41 ", "00:00:6 2", "00:00:8 6", "00:01:01", "00:01:21", "00:01:44", "00:01:6 1", "" 00:02:01 00:01:8 2", ", "00:02:22", "00:02:41", "00:02:6 1", "00:02:8 1", "00:03:01", "00:03:28", "00:03:50", "00:03:7 0", "00:03:88", "00:04:08", "00:04:29", "00:04:48", "00:04:69" ], "axisLabel": { "show": true, "inside": false, "rotate": 0, "margin": 5, "color": "#999", "interval": 4 } } ], "yAxis": [ { "type": "value", "scale": true, "show": true } ], "series": [ { "name": "one_table2", "type": "line", "symbol": "none", "lineStyle": { "width": , "markPoint" : {1} "data" : [{" name ":" markers ", "value" : - 58, "xAxis" : "00:01:6 1", "yAxis" : - 58, "xIndex" : 8}, {" name ":" markers ", "value" : 59, "xAxis" : "00:01:8 2", "yAxis" : 59, "xIndex" : 9}, {" name ":" markers ", "value" : -33, "xAxis": "00:02:01", "yAxis": -33, "xIndex": 10 } ], "effect": { "show": true, "shadowBlur": 0 } }, "data": [ - 38-4-10-53-18-14-54, 55, 58, 59, - 33-49-23-10-51-3-32-34-3-36-13-42, 18, to 28, 54, 7, 2, 15, - 2-31-25-3 46, 58, 7, - - - 5-19-21-43-3, 59, - 21-8-15-43-54-58-48, 1, 1, 4, 2, - 17-58, 15, 7, 8, 58, - 4-20-45-3-58-40-12, - 19]},]}Copy the code

This article uses the article synchronization assistant to synchronize