ECharts configuration syntax
In this section we will introduce you to some of the configurations that useECharts to generate charts.
Step 1: create a HTML page
Create a HTML page and introduce echarts.min.js :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Introducing ECharts files -->
<script src="echarts.min.js"></script>
</head>
</html>
Step 2: prepare a DOM container with height and width for ECharts
Id in the instance is main of div used to include charts drawn by ECharts:
<body>
<!-- Prepare a DOM with size (width and height) for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
Step 3: set configuration information
ECharts library usage json format to configure.
echarts.init(document.getElementById('main')).setOption(option);
Here option indicates the use of json the configuration of the data format to draw the chart. The steps are as follows:
Title
Configure the title for the chart:
title: {
text: 'First ECharts instance'
}
Prompt information
Configuration tips:
tooltip: {},
Legend component
The legend component shows a different series of tags (symbol), colors and names. You can control which series are not displayed by clicking on the legend.
legend: {
data: [{
name: 'series 1',
// Force the shape to be a circle.
icon: 'circle',
// Set text to red
textStyle: {
color: 'red'
}
}]
}
X axis
Configure the items to display on the X axis:
xAxis: {
data: ["Shirts", "woolen sweaters", "chiffon shirts", "pants", "high heels", "socks"]
}
Y axis
Configure the items to display on the Y axis.
yAxis: {}
Series list
Each series passes through type decide your own chart type:
series: [{
name: 'sales volume', // Series Name
type: 'bar', // Series chart types
data: [5, 20, 36, 10, 10, 20] // Data content in the series
}]
Each series passes through type decide your own chart type:
Type: ‘bar’:Column/bar chart
Type: ‘line’:Line/Area Chart
Type: ‘pie’:Pie
Type: ‘scatter’:Scatter (bubble) plot
Type: ‘effectScatter’:Scatter (Bubble) with Ripple Effect Animation
Type: ‘radar’:Radar chart
Type: ‘tree’:Tree Map
Type: ‘treemap’:Tree Map
Type: ‘sunburst’:Sunrise chart
Type: ‘boxplot’:Box plot
Type: ‘candlestick’:Candlestick chart
Type: ‘heatmap’:heat map
Type: ‘map’:Map
Type: ‘parallel’:Series of parallel coordinate systems
Type: ‘lines’:diagram
Type: ‘graph’:Relationship diagram
Type: ‘sankey’:Sankey
Type: ‘funnel’:Funnel plot
Type: ‘gauge’:Dashboard
Type: ‘pictorialBar’:Pictogram
Type: ‘themeRiver’:Theme River
Type: ‘custom’:Custom series
Example
The following is a complete example:
Example
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>The first one ECharts
example</title><!--introduce
echarts.js--><scriptsrc="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head><body><!--Prepare a Dom with size (width and height) for ECharts--><divid="main"style="width:
600px;height:400px;"></div><scripttype="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>
For more configuration items, please see: https://echarts.apache.org/zh/option.html