Echarts Line Chart Complete Configuration Guide

Echarts line charts are one of the most commonly used displays for charts. Using Echarts to make a basic line chart is easy, but putting multiple sets of data into one chart is not easy to make it look nice and intuitive. This article will guide you from a basic line chart to a highly readable visual chart.

You can sign up for a line chart Demo in the Kara cloud to follow this tutorial

Follow this tutorial as you learn

1. Polyline appearance attributes

  • Polyline adds arc smooth transition
  • The line chart becomes a scatter of dots
  • The solid line is changed to a dotted line
  • The broken line specifies the color
  • Add data display
  1. Table appearance properties
  • A data prompt box is displayed when the mouse is sliding
  • The cross collimation indicator is displayed when the mouse slides
  • Slide the mouse over data automatically adsorption
  • Set the X and Y colors
  • Set the X axis label to be displayed at an Angle of 45 degrees
  • Sets the chart background color
  • Set the function keys for downloading charts

Echarts Line chart Basic configuration

This article uses the Cara Cloud, a low-code development tool, as a demonstration tool for Echarts line charts. The Cara Cloud has dozens of common front-end components, including the Echarts chart component, that can be generated by drag and drop. You can quickly develop your own backend tools without knowing anything about the front end. See the end of this article for details.

Let’s start with this simple line chart, and walk you through it step by step.

Option = {title: {text: 'Orient: 'horizontal', x: 'center'}, legend: {Orient: 'horizontal', x: {title: {text:' Orient: 'horizontal', x: 'left', y: 'top', data: [' guess ', 'expected', 'real']}, the grid: {top: '20%', left: '3%', right: '10%', bottom: '5%' containLabel: True}, xAxis: {name: 'month ', type: 'category', data: [' in January, February, march, April, may, June, July, August, September, October, November, December,]}, yAxis: {name: 'people', type: 'value', min:0, // Set minimum Y scale Max :4000, // Set maximum Y scale splitNumber:7, // Set Y scale interval}, series: [// multi-group line chart data {name: 'guess' data: 4158 1], [454226891978901581400543272955129 type: 'the line'}, {name: 'expected' data: [2455253, 4236, 0230, 1286, 1218, 1194, 4219, 7174, 5181, 0228, 3229, 8], type: 'the line'}, {name: 'real' data: [1107135 2174 0196 8164 7157 0134 3175 7254 7276 2317 0366 5], type: 'the line'}], color: ['#3366CC', '#FFCC99','#99CC33'] }Copy the code

Read more: The 7 Best Vue Rich Text Editors to Use

Echarts line chart configuration guide for multiple display forms

  • “Guess” polyline changed to scatter dots
  • “Guess” polyline dots change size according to data size
  • The “guess” polyline hides the segment portion
  • The “expected” broken line is changed to a dashed line
  • The “real” line is changed to excessive radians
  • Echarts Legend attribute configuration (Legend configuration option)
  • Echarts Grid property configuration (top, bottom, left, right edges of graph)

Fill the chart component of the Cara cloud with code:

Option = {title: {text: 'New user activation data ', subtext:' dummy data ', x: 'center'}, legend: {// Horizontal ', // Legend layout: horizontal', vertical' x: 'left', // Horizontal position: 'center', 'left', 'right', 'number' (horizontal value px) y: 'top', 'center',' number' (px) data: [' guess ',' expected ',' actual ']}, grid: {// Chart distance from border, available percentage and number (PX) configuration Top: '20%', left: '3%', right: '10%', bottom: '5%', containLabel: true}, xAxis: {name: 'in' type: 'category' data: [' in January, February, march, April, 'may' and 'in June, July, August, September, October, November, December,]}, yAxis: {name: SplitNumber :7, // splitNumber:7, // splitNumber:7, // splitNumber:7}, series: [{name: series] 'guess' data: 4158 1], [454226891978901581400543272955129 type: 'the line' symbolSize: Function (value) {return value / 150;}, symbol:'circle', itemStyle: {normal: {label: {show: True}, lineStyle:{color: 'rgba(0,0,0,0)'// the line color is set to 0, i.e., only the line is displayed}}}}, {name: 'expected ', data: [2455253 4236 0230 1286 1218 1194 4219 7174 5181 0228 3229 8], type: ItemStyle :{normal:{label :{show: Type :'dotted' // dotted' dotted' solid'}}}}, {name: 'dotted', data: [1107135 2174 0196 8164 7157 0134 3175 7254 7276 2317 0366 5], type: 'the line' symbol: 'circle', / / solid dot smooth: 0.5, a line arc}] / / set, color: [' # 3366 cc ', '# FFCC99', '# 99 cc33'] / / the color of the three line}Copy the code

Read more: 12 Best Vue Open Source UI Library Reviews – Recommended for Domestic Usage Scenarios

Echarts Line chart Global configuration Guide

  • A data prompt box is displayed when the mouse is sliding
  • The cross collimation indicator is displayed when the mouse slides
  • Set the X and Y colors
  • Set the X axis label to be displayed at an Angle of 45 degrees
  • Sets the chart background color
  • Set the function keys for downloading charts

Fill the chart component of the Cara cloud with code:

Option = {title: {text: 'New user activation data ', subtext:' dummy data ', x: 'center'}, legend: {// Horizontal ', // Legend layout: horizontal', vertical' x: 'left', // Horizontal position: 'center', 'left', 'right', 'number' (horizontal value px) y: 'top', 'center',' number' (px) data: [' guess ',' expected ',' actual ']}, grid: {// Chart distance from border, available percentage and number (PX) Settings Top: '20%', left: '3%', right: '10%', bottom: '5%', containLabel: true}, Tooltip: {// Tooltip is used to control the tooltip box when the mouse slides or clicks (more on that in the next chapter) trigger: 'axis', axisPointer: {// Coordinate axis indicator configuration items. Type: 'cross', // 'line' indicator 'shadow' indicator 'none' indicator 'cross' crosshair indicator. Axis: 'auto', // The axis of the indicator. Snap: true, // does the axis indicator automatically attach to the point}, showContent: true,}, toolbox: {// upper right toolbox (expanded in the next chapter) feature: {saveAsImage: } // Download button}}, xAxis: {name: 'month ', type: 'category', axisLine: {lineStyle: {// X-axis color configuration color: '#3366CC'}}, axisLabel: {rotate: 45, // X-axis label text rotate Angle interval: 0 // set X-axis data to display at intervals, 0 means both display}, boundaryGap: False, / / data from Y initial data: [' in January, February, march, April, may, June, July, August, September, October, November, December,]}, yAxis: {name: 'person-time ', type: 'value', min:0, // Configure the minimum Y-axis scale Max :4000, // Configure the maximum Y-axis scale splitNumber:7, // Configure the Y-axis number interval. {// color: '#3366CC'}},}, series: [{name: 'id ', data: 4158 1], [454226891978901581400543272955129 type: 'the line' symbolSize: Function (value) {return value / 150;}, symbol:'circle', itemStyle: {normal: {label: {show: True}, lineStyle:{color: 'rgba(0,0,0,0)'// the line color is set to 0, i.e., only the line is displayed}}}}, {name: 'expected ', data: [2455253 4236 0230 1286 1218 1194 4219 7174 5181 0228 3229 8], type: ItemStyle :{normal:{label :{show: Type :'dotted' // dotted' dotted' solid'}}}}, {name: 'dotted', data: [1107135 2174 0196 8164 7157 0134 3175 7254 7276 2317 0366 5], type: 'the line' symbol: 'circle', / / solid dot smooth: 0.5, a line arc}] / / set, color: [' # 3366 cc ', '# FFCC99', '# 99 cc33'] / / the color of the three line}Copy the code

Evaluation and Recommendation of 5 Vue Table Components

Echarts Toolbox for more properties

toolbox={ show : True, // Display toolbar components Orient :"horizontal", // Horizontal 'vertical' layout of the icon itemSize:15, // The size of the icon itemGap:10, ShowTitle :true, // Whether to display the title of each tool icon with mouse hover feature: {mark: {// 'helper switch' show: True}, dataView: {// dataView tool, which can display the data used by the current chart, can be dynamically updated after editing show: true, // whether to display the tool. Title :" data view ", readOnly: false, // whether uneditable (readOnly) lang: [' data view ', 'shut down', 'refresh'], / / data view has three words, the default is [' data view ', 'shut down', 'refresh'] backgroundColor: "# FFF", / / data view layer background color. TextareaColor :"# FFF ", // background color of data view floating text input area textareaBorderColor:"#333", // border color of data view floating text input area textColor:"#000", // textColor. ButtonColor :"#c23531", // buttonColor. ButtonTextColor :"# FFF ", // buttonTextColor. }, magicType: {// dynamic type switch show: true, title:" switch ", // each type of title text, can be configured separately. Type: ['line', 'bar'], // Enabled dynamic types, including 'line' (switched to line chart), 'bar' (switched to bar chart), 'stack' (switched to stack mode), 'tiled' (switched to tiled mode)}, restore: {// Restore configuration items. Show: true, // Whether to display the tool. }, saveAsImage: {// Save as an image. Show: true, // Whether to display the tool. Type :" PNG ", // Save the image format. Supports' PNG 'and' JPEG '. BackgroundColor :"# FFFFFF ", backgroundColor:"# FFFFFF ", backgroundColor:" pic1", PixelRatio :1 // The resolution ratio of the saved image. The default is the same size as the container. If you need to save a higher resolution, you can set it to a value greater than 1. For example, 2}, dataZoom :{// Data area scaling. Currently only cartesian scaling is supported show: true, // Whether to display the tool. Title :" zoom ", // Zoom and restore the title text xAxisIndex:0, // specify which xAxis is controlled. By default, all x-axes are controlled. If set to false, no X-axis is controlled. If set to 3, control the X-axis with axisIndex 3. If set to [0, 3] controls axisIndex 0 and yAxisIndex:false for X-axis 3, // specify which yAxis is controlled. If the default controls all y axes. If set to false, no Y-axis is controlled. If set to 3, control the Y-axis with axisIndex as 3. },}, zlevel:0, // The Canvas layer of the graphics it belongs to, Canvas with higher zlevel will be placed on top of Canvas with lower zlevel z:2. Left :"center", // The distance between the component and the left side of the container,'left', 'center', 'right','20%' top:"top", // The distance between the component and the top side of the container,'top', 'middle', 'bottom' and '20%' right, "auto", / / component from the container to the right of the distance, '20%' bottom: "auto", / / component container underside, '20%' width: "auto", / / illustrations width height: "auto", };Copy the code

The best 7 Vue Admin Background Management Framework Evaluation

Echarts Tooltip has more properties configured

Tooltip: {show: true, // whether to display trigger: 'axis', // Trigger type 'item' graphics trigger: scatter charts, pie charts and other non-category axis chart use; 'axis' axes trigger; 'None' : Nothing is triggered. AxisPointer: {// Coordinate axis indicator configuration item. Type: 'shadow', // 'line' indicator 'shadow' indicator 'none' indicator 'cross' indicator. Axis: 'auto', // The axis of the indicator. Snap: true, // whether the axis indicator is automatically attached to the point}, // showContent: true, // Whether to display the float of the prompt box, default display. // triggerOn: 'mouseover', // trigger time 'mouseover' when the mouse moves. 'click' triggered when the mouse is clicked. 'mousemove | click' at the same time the mouse and click on the trigger. // Enterable: false, // Whether the mouse can enter the floating layer of the prompt box. The default value is false, and the value can be set to true for detailed interaction, such as adding links and buttons. RenderMode: 'HTML ', // float layer renderMode, default to' HTML i.e. extra DOM node display tooltip; BackgroundColor: 'rgba(50,50,50,0.7)', // the backgroundColor of the float layer of the prompt box. BorderColor: '#333', // the borderColor of the float layer of the prompt box. BorderWidth: 0, // the borderWidth of the float layer of the prompt box. TextStyle: {// the textStyle of the float. color: '#fff', fontStyle: 'normal', fontWeight: 'normal', fontFamily: 'sans-serif', fontSize: 14, }, extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); ', // Additional CSS style additions to the float layer confine: false, // Whether to confine the tooltip box to the area of the chart. Function (arg) {return arg[0]. Name + '+ arg[0].data}},Copy the code

Read more: 6 Best Vue Drag-and-drop Library Recommendations

Use “Cara cloud” to directly generate line chart, bar chart, pie chart

This article introduces various configuration details of Echarts line chart, from simple to difficult, step by step. Although Echarts has a lot of tutorials, there is always too much duplication of effort in configuring the front end, so is there a way to generate diagrams without knowing the front end or writing a line of code at all? It is recommended that you use the Kara Cloud, which has a variety of built-in charts that can be generated by mouse drag and drop without any front-end knowledge.

Cara Cloud is a new generation of low-code development tools, free of installation and deployment, with one-click access to common databases and apis including MySQL. According to their own workflow, customized development. No tedious front-end development, just simple drag and drop, can quickly build enterprise internal tools. The original three days of development work can be reduced to 1 hour after using Kara cloud, welcome to try kara cloud for free.

Read more:

  • MySQL GUI Database Management Tools – Free vs. paid
  • The most useful Vue3 admin background management system framework evaluation
  • The best 6 free weather forecast API API comparison evaluation – Hefeng Weather, Gaode weather API access details
  • 7 best Laravel Admin background Management system recommendations
  • Vue Router provides you with a Vue3 Router
  • React Draggable implement Draggable component library
  • Echarts Line chart Complete configuration guide