| (window.webpackJsonp=window.webpackJsonp||[]).push([[45],{339:function(e,t,n){"use strict";n.r(t),t.default='# Basic Line Chart.\n\nThe line chart is basically used to show the phase trend over time. The line chart is pretty useful to display a continuous 2D dataset like the fluctuation in the number of website visitors or sales prices.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1">\n</iframe>\n\nExcept for displaying the trend of developing things, the line chart can be used to compare several different datasets. As shown below, we use a line chart to compare the sales of three different commodities and analyze which one is the best.\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1">>\n </iframe>\n\nA line chart is drawn by connecting data points with lines. For the beauty of special effects, you can also connect points with curves as shown in the chart above. This chart is also called a curve chart or spline chart. The usage of the spline chart is the same as the line chart. The only difference is that the connection between data points is a curve but not a straight line.\n\n## Suggestion for Using Line Chart\n\n1. To make sure the data readability, use solid lines in charts if you can separate the data line and axis.\n\n2. Do not draw more than 4 lines in a chart. As shown below, lines are entangled together without obvious contrast that makes the whole chart confusing and difficult to read.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1">\n</iframe>\n\n3. Don\'t use decorates to separate charts. The legend is helpful, but sometimes distracting users:\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1">\n</iframe>\n\n4. When displaying the data of the line chart, avoid deliberately distorting the trend. The meaningful volatility analysis chart should make the height of the item be two-thirds of the height of the y-axis.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/line/line01.jpg"></img>\n'}}]); |