Introduction to ECharts

ECharts is a JavaScript-based data visualization chart library that provides intuitive, vivid, interactive, and customizable data visualization charts. ECharts was originally open-sourced by the Baidu team, and was donated to the Apache Foundation in early 2018, becoming an ASF incubation-level project.
insert image description here

ECharts provides regular line charts, histograms, scatter charts, pie charts, candlestick charts, box charts for statistics, maps, heat maps, and line charts for geographic data visualization, and relational data visualizations. Relationship diagrams, treemaps, sunburst diagrams, parallel coordinates for multidimensional data visualization, and funnel diagrams for BI, dashboards, and support for mashups between diagrams.

1. ECharts download

1. Enter ECharts Chinese website: https://echarts.apache.org/zh/index.html
insert image description here
2. Click Download under Download

2. Click Dist insert image description here

3. Log in to your account first. If you don’t have an account, please register. Click echarts. Of course, you can also use Baidu Netdisk: https://pan.baidu.com/s/1OC-UBOmDo0DFWnIx5aZsxw Extraction code: v69m
insert image description here

4. Click the green Code button, then click Download zip to start downloading
insert image description here
5. The download is complete

Second, ECharts installation

Unzip the downloaded compressed package to a storage location
insert image description here

Three, ECharts entry case

(1) Introducing ECharts

The way of importing ECharts becomes easier, because starting from ECharts 3, there is no need to use AMD to import, and the code no longer has a built-in AMD loader, so the import method of ECharts can be imported with the script tag like a JavaScript library.

The following is the code introduced by Echarts:

<!-- 引入 ECharts 文件 -->
<script src="..\echarts.min.js"></script>

(2) Prepare the container

Before using Echarts to draw a chart, you need to have a DOM container with width and height, the code is as follows:

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

(3) Use Echarts to draw a simple chart

source code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>梁辰兴实例</title>
		<!-- 引入 ECharts 文件 -->
		<script src="..\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>

running result
insert image description here

ECharts download and installation tutorial

Article directory