introduction:
When we build a backend management system, there is always a lot of data to process. At this time, data visualization operations are very important. Today, let us learn the application of ECharts.
As the saying goes, a text is not as good as a table, and a table is not as good as a picture. Displaying data in the form of charts is a simple data visualization.
There are three main ways of data visualization: 1. Report type 2. Business intelligence BI 3. Coding type We are mainly here to learn Echarts
in the third coding type , official website address: https://echarts.apache.org/zh/ index.html
ECharts definition:
- ECharts is an open source visualization library implemented in JavaScript, covering charts in various industries and meeting various needs. (Made by Baidu)
- ECharts follows the Apache-2.0 open source license and is free for commercial use.
ECharts includes the following features:
-------------------------------------------------- ------(This section comes from the novice tutorial)------------------------------------------------ ------------
Rich visualization types: Provides conventional line charts, column charts, scatter charts, pie charts, K-line charts, box charts for statistics, and geographical data Visualized maps, heat maps, line charts, relationship diagrams, treemaps, sunburst diagrams for relational data visualization, parallel coordinates for multi-dimensional data visualization, funnel diagrams for BI, dashboards, and support between diagrams mash up.
Multiple data formats can be used directly without conversion: the built-in dataset attribute (4.0+) supports the direct input of data sources in multiple formats including two-dimensional tables, key-value, etc. In addition, it also supports the input of data in TypedArray format.
Front-end display of tens of millions of data: Through incremental rendering technology (4.0+) and various meticulous optimizations, ECharts can display tens of millions of data.
Mobile terminal optimization: Detailed optimization has been made for mobile terminal interaction. For example, the small mobile terminal screen is suitable for zooming and panning in the coordinate system with fingers. On the PC side, you can also use the mouse to zoom (use the mouse wheel), pan, etc. in the picture.
Multiple rendering solutions, cross-platform use: supports rendering charts in the form of Canvas, SVG (4.0+), and VML.
In-depth interactive data exploration: Provides out-of-the-box interactive components such as legends, visual mapping, data area zooming, tooltips, and data brush selections, which can perform interactive operations such as multi-dimensional data filtering, view zooming, and display details. .
Support for multi-dimensional data and rich visual encoding methods: For traditional scatter plots, etc., the incoming data can also be multi-dimensional.
Dynamic data: changes in data drive changes in chart display.
Brilliant special effects: Provides eye-catching special effects for the visualization of line data, point data and other geographical data.
Achieve more powerful and gorgeous three-dimensional visualization through GL: realize three-dimensional visualization effects in VR and large-screen scenes.
Accessibility (4.0+): Supports automatic and intelligent generation of descriptions based on chart configuration items, allowing blind people to understand chart content with the help of reading devices, making charts accessible to more people!
-------------------------------------------------- ------(This section comes from the novice tutorial)------------------------------------------------ ----------
Creation steps:
There are several main steps to create an ECharts icon:
Step 1: Introduce the echarts.js file
Step 2: Prepare a box to display the chart (this box must be given width and height)
Step 3: Initialize the echarts instance object (remember to put this script tag in After rendering the chart box, or window.onload)
Step 4: Prepare configuration items (use ECharts to create different tables, only the configuration items will change, other codes are fixed)
Step 5: Configure the configuration items to the echarts instance object
Case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 步骤1：引入echarts.js文件 -->
<script src="./lib/echarts.min.js"></script>
</head>
<!--
步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项配置给echarts实例对象
-->
<body>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px;"></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数，dom，决定图标最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
// 步骤4：准备配置项
var option = {
// x轴
xAxis: {
type: 'category', // 类目轴
data: ['小明','小丽','小王'] // 类别
},
// y轴
yAxis: {
// 设置为value之后就不用设置data，它会自动去series的data里去找寻每个类别对应的值
type: 'value' //数值轴
},
// 系列列表，每个系列列表通过type决定自己的图表类型
series: [
{
name: '语文',
type: 'bar', //bar -- 柱状图 pie--饼状图
data: [70, 88, 98]
}
]
}
// 步骤5：将配置项配置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
