Line chart is also one of the most commonly used charts. The core idea is trend change. Line chart is a graph connected with points and lines, which can reflect the development trend and distribution of things. It is suitable for showing the trend of change and growth when a single data point is not so important. In order to view commodity sales data and ticket price data of scenic spots more intuitively, ECharts needs to draw different line charts for display, such as standard line chart, accumulation area chart, accumulation area line chart and accumulation area line chart.
Standard line chart is formed by x axis and y axis area of some of the points, lines, and these points, lines or text description, the coordinate system is often used to display data or orderly category at any time and change trend, can very good showing data is increasing or decreasing, the rate of increase and decrease, increase or decrease in the laws of the (cyclical, spiral, etc.), peak etc. Characteristics. In line charts, categories are usually labeled along the horizontal axis and values along the vertical axis. A standard line chart is drawn based on the statistics of people flow in a city in a week, as shown in the figure. As can be seen from the figure, the figure is a standard line chart, which contains only one line, data grid, title, legend, X axis and Y axis. The chart is very simple.
Source code is as follows:
<html> <head> <meta charset="utf-8"> <! - introduce ECharts script -- > < script SRC = "js/ECharts js" > < / script > < / head > < body > <! <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {backgroundColor: '#eee', title: {backgroundColor: '#eee', title: { {// Set the main title text style color: 'red',}, x: 'center'}, tooltip: {// set the main title text style color: 'red',}, x: 'center'}, tooltip: {// Configure the tooltip component trigger: 'axis'}, legend: {data: [' people '], left: 'right'}, xAxis: [/ / configure the X axis {type: 'category' data: [' Monday 'and' on Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday ' ']}], yAxis: [// configure the Y axis {type: 'value'}], series: [// configure the data series {name: 'traffic ', type: 'line', // set the specified display as a line data: [80, 125, 160, 140, 200, 245, 155], smooth: true }, ] }; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code