Catalog
3. Main related configurations (commonly used)
Fourth: Common charts for ECharts
One: What is ECharts
ECharts is a JavaScript-based database of data visualization charts that provide intuitive, vivid, interactive and customizable data visualization charts.
The bottom level relies on the vector graphics library ZRender to provide intuitive, interactive and highly customizable data visualization charts.
Popular understanding:
- Is a JS plugin
- Good performance to run PC and mobile devices smoothly
- Compatible with mainstream browsers
- Many commonly used graphs (line, column, scatter, pie, K-line) are available and customizable (supports customization)
2: Introduction to Echarts
Step 1: Download echarts.js file
Official Web Tutorial: Getting Started in Five Minutes
1. Download echarts.js
Download link: https://www.jsdelivr.com/package/npm/echarts?path=dist
Full version: echarts.js, the largest size, with all charts and components
Common version: echarts.common.js, moderately sized, with common charts and components
A streamlined version: echarts.simple.js, small and contains only the most commonly used charts and components
You can also use the online import address to enter the web address to select the version you want to reference: http://www.bootcdn.cn/echarts/
Step 2: Introduce echarts.js file
<!-- Introduce echarts.js file --> <script src="echarts.min.js"></script>
Step 3: Prepare a box to present the chart
<div style="width: 600px;height: 400px;"></div>
Step 4: Initialize echarts instance object
// Initialize echarts instance object
// Parameter, the dom determines where the chart will eventually appear
var mCharts = echarts.init(document.querySelector('div'));Step 5: Preparing configuration items
var option = {
xAxis:{
type: 'category',
data:['Xiao Ming','Little Red','Xiaowang']
},
yAxis:{
type:'value'
},
series:[
{
name:'Chinese',
type:'bar',
data:[70,92,87]
}
]
};Step 6: Set the configuration item to the echarts instance object
mCharts.setOption(option);
3. Main related configurations (commonly used)
Official Web Configuration Item Reference Document: address
Main configurations to understand: series xAxis yAxis grid tooltip title legend color
xAxis: The X-axis in a Cartesian coordinate system, if the type attribute has a category value, then data data data needs to be configured to represent the representation on the x-axis
yAxis: y-axis in Cartesian coordinate system, if the type property is configured as value, then data does not need to be configured, and the y-axis automatically goes to series to look for data for charting
Data to set the data for each series
- List of series. Each series determines its own chart type by type
- General understanding: icon data, specify what type of icon, can overlap multiple charts.
- boundaryGap: The policy of leaving a blank on both sides of the axis is true, when the scale acts as a dividing line, with labels and data points in the middle of a band between the two scales.
- yAxis: y-axis in grid of Cartesian coordinate system
- Grid: Draws a grid in a Cartesian coordinate system.
- title: title Component
- tooltip: prompt box component
- Legend: legend component
- Color: palette color list
- Stack: A data stack in which the values of the subsequent series are added to the values of the previous series after they are configured with the same stack value on the same category axis.
It is very specific to refer to the official documentation for more configuration items.
Fourth: Common charts for ECharts
4.1.Column Chart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width:600px;height:400px">
</div>
<script>
var mcharts = echarts.init(document.querySelector('div'));
var yDataArr = [99,80,73,95];
var option = {
tooltip:{
// trigger:'item'
trigger:'axis',
triggerOn:'click',
// formatter:'{b}'scored {c}'
formatter: function(arg){
console.log(arg);
return arg[0].name+'The score is'+arg[0].data;
}
},
toolbox:{
feature:{
saveAsImage:{}, //Export Pictures
dataView:{},//Data View
restore:{},//Reset
dataZoom:{},//Zoom
magicType: {
type: ['line', 'bar']
}
}
},
xAxis:{
type:'category',
data:['Xiao Ming','Little Red','Xiaowang']
},
legend:{
data:['Chinese','Mathematics']
},
yAxis:{
type:'value'
},
series:[
{
name:'Chinese',
type:'bar',
data:[88,92,63,82],
markPoint:{
data:[
{
type:'max',name:'Maximum'
},
{
type:'min',name:'minimum value'
}
]
},
markLine:{
data:[
{
type:'average',name:'average value'
}
]
},
label:{
show:true,
rotate:60,
position:'top'
}
},
{
name:'Mathematics',
type:'bar',
data:yDataArr
}
]
}
mcharts.setOption(option);
</script>
</body>
</html> 
Mark:
- Maximum, minimum markPoint
- Average markLine
display
- Numeric display label
Column width barwidth
Transverse Column
The so-called transverse column graph simply needs to have the x-axis and y-axis roles interchanged. That is, xAxis's type is set to value, yAxis's type is set to category, and data is sufficient
General Configuration
title:
Tip box: tooltip
Trigger type: trigger
- Optional values are item, axis
Trigger timing: triggerOn
Optional values are mouseOver, click
Formatted display: formatter
callback
tooltip:{
// trigger:'item'
trigger:'axis',
triggerOn:'click',
// formatter:'{b}'scored {c}'
formatter: function(arg){
console.log(arg);
return arg[0].name+'The score is'+arg[0].data;
}
}
Tool button: toolbox
toolbox is a toolbar provided by ECharts with five built-in tools: export pictures, data view, reset, data area zoom, dynamic type switching
Legend: legend
legend is an illustration used to filter categories and needs to be used with series
- data in legend is an array
- The value of data in legend needs to match the name value of a set of data in the series array
legend:{
data:['Chinese','Mathematics']
},4.2Line chart
Same principle (just change the type:'bar'in series to type:'line',)
scale configuration
- scale should be configured for y-axis
yAxis:{
type:'value',
scale:true
}More use of line charts to show trends in data over time
Only one case has been written for your reference! Refer to the echarts official reference document for more detailed cases: Apache ECharts