ECharts tutorial
ECharts is an open source visualization library implemented in JavaScript, covering various industry diagrams to meet a variety of needs.
ECharts follows the Apache-2.0 open source agreement and is free for commercial use.
ECharts is compatible with most browsers (IE8/9/10/11,Chrome,Firefox,Safari,etc.) and a variety of devices, and can be displayed willfully anytime, anywhere.
What you need to know before reading this tutorial:
To read this tutorial, you need to have the following foundations:
HTML tutorial
JavaScript tutorial
First ECharts instance
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First ECharts instance</title>
<!-- introduce echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('main'));
// Specify configuration items and data for the chart
var option = {
title: {
text: 'First ECharts instance'
},
tooltip: {},
legend: {
data:['sales volume']
},
xAxis: {
data: ["Shirts", "woolen sweaters", "chiffon shirts", "pants", "high heels", "socks"]
},
yAxis: {},
series: [{
name: 'sales volume',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// Use the newly specified configuration items and data to display charts.
myChart.setOption(option);
</script>
</body>
</html>
ECharts characteristics
ECharts includes the following features:
Rich visualization types: provide conventional line chart, column chart, scatter chart, pie chart, K chart, box chart for statistics, map, thermal map, line chart for geographic data visualization, relational data visualization diagram, treemap, rising sun chart, parallel coordinates for multi-dimensional data visualization, funnel chart for BI, dashboard, and support the mash-up between charts and charts.
Multiple data formats can be used directly without conversion: built-in
datasetproperties (4.0+) support direct input, including two-dimensional tables，key-valueand other data sources in multiple formats, in addition to supporting inputTypedArrayData in the format. Front-end display of tens of millions of data: through incremental rendering technology (4.0 +), with a variety of detailed optimizationEChartscan show tens of millions of levels of data.Mobile optimization: detailed optimization is made for the interaction of the mobile terminal, for example, the small screen of the mobile terminal issuitable for zooming and translating with fingers in the coordinate system.The PC side can also use the mouse to zoom (scroll wheel with the mouse), pan, and so on.
Multi-rendering scheme, cross-platform use: support rendering charts in the form of Canvas, SVG (4.0 +) and VML.
In-depth interactive data exploration: provide out-of-the-box interactive components such as legend, visual mapping, data area scaling, tooltip, data brushing, etc., which can perform multi-dimensional data filtering, view zooming, showing details and other interactive operations.
Support for multi-dimensional data and rich visual coding methods: for traditional scatter maps, the incoming data can also be multi-dimensional.
Dynamic data: changes in data drive changes in the presentation of the chart.
Gorgeous special effects: the visualization of geographic data such as line data and point data provides eye-catching special effects.
Through GL to achieve more powerful and gorgeous 3D visualization: in VR, large screen scene to achieve 3D visualization.
Barrier-free access (4.0 +): support automatic intelligent generation of descriptions according to chart configuration items, so that the blind can understand the contents of the chart with the help of reading devices, so that the chart can be accessed by more people!