ECharts tutorial
ECharts is an open source visualization library implemented using JavaScript, covering various industry charts to meet various needs.
ECharts follows the Apache-2.0 open source agreement and is free for commercial use.
ECharts is compatible with most current browsers (IE8 / 9/10/11, Chrome, Firefox, Safari, etc.) and compatible with multiple devices, and can be displayed at will anytime, anywhere.
Before reading this tutorial, what you need to know:
To read this tutorial, you need to have the following basics:
The first ECharts instance
Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>Click the "Try It Out" button to view online examples
ECharts features
ECharts includes the following features:
-
Rich visualization types : provides conventional line charts, bar charts, scatter charts, pie charts, K line charts, box charts for statistics, maps, heat maps, and line charts for geographic data visualization. Relational diagrams for visualization of relational data, treemaps, sunburst diagrams, parallel coordinates for visualization of multidimensional data, funnel diagrams for BI, dashboards, and support for mashup between diagrams and diagrams.
-
A variety of data formats can be used directly without conversion : The built-in dataset property (4.0+) supports direct input of data sources including two-dimensional tables, key-values, and other formats. In addition, it also supports input of data in TypedArray format.
-
Front-end display of 10 million data : With incremental rendering technology (4.0+) and various detailed optimizations, ECharts can display 10 million levels of data.
-
Mobile terminal optimization : The mobile terminal has been carefully optimized, for example, the small screen on the mobile terminal is suitable for zooming and panning in the coordinate system with fingers. The PC can also use the mouse to zoom (use the mouse wheel), pan and so on.
-
Multi-rendering scheme, cross-platform use : Supports rendering charts in the form of Canvas, SVG (4.0+), VML.
-
In-depth interactive data exploration : provides legend, visual mapping, data area zoom, tooltip, data brushing and other interactive components out of the box, which can perform multi-dimensional data filtering, view zoom, display details and other interactive operations on the data .
-
Multi-dimensional data support and rich visual coding methods : For traditional scatter plots, etc., the incoming data can also be in multiple dimensions.
-
Dynamic data : Changes in data drive changes in chart presentation.
-
Brilliant special effects : Visualizing line data, point data and other geographic data provides eye-catching special effects.
-
Realize more and more powerful and gorgeous 3D visualization through GL: Realize 3D visualization in VR and large screen scenes.
- Barrier-free access (4.0+) : Supports automatic generation of descriptions based on chart configuration items, so that blind people can understand the contents of the chart with the help of reading devices, so that the chart can be accessed by more people!
