Example of creating a chart using the Javascript ECharts component

ECharts is a graph library based on html5 Canvas and pure Javascript. It can run smoothly on PCs and mobile devices and is compatible with most browsers (IE8, 9/10, and 11, Chrome, Firefox, and Safari), providing intuitive, vivid, and interactive services, highly customizable data visualization charts.

ECharts provides regular line charts, bar charts, scatter plots, pie charts, and K-line charts. It is a box-shaped chart used for statistics. It is used for Geo data visualization maps, heat maps, line charts, it is used for relational data visualization relational graphs, treemap, parallel coordinates of multi-dimensional data visualization, as well as funnel charts and dashboards for BI, and supports mashups between graphs.
Introduce ECharts

The introduction method is very simple. You only need to use the script tag like a common JavaScript library.

<Script src = "echarts. min. js"> </script>
Drawing charts

Prepare a div container with a height where you need to place the chart in the body. Be sure to set a height.

<Div id = "myChart" style = "width: 600px; height: 400px;"> </div>

Then, you can use the echarts. init method to initialize an echarts instance and use the setOption method to generate a simple bar chart.
// Initialize an echarts instance

Var myChart = echarts. init (document. getElementById ('mychart '));
 
// Specify the configuration items and data of the chart
Var option = {
Title :{
Text: 'sales volume statistics for this month ',
Left: 'center'
},
Tooltip :{},
XAxis :{
Data: ["shirt", "sweater", "chiffon shirt", "pants", "high heels", "so"]
},
YAxis :{},
Series :[{
Name: 'Salesman ',
Type: 'bar ',
Data: [115,220,136,100,100, 60]
}]
};
 
// Use the specified configuration item and data to display the chart.

MyChart. setOption (option );

After running the code, you can generate a bar chart on the page. For details about Echarts configuration items, refer to the document on the Echarts official website: http://echarts.baidu.com/option.html#title. Next, Helloweba will introduce more articles in combination with chart instances to introduce the use of Echart.