9.3. ECharts configuration syntax

发布时间 ： 2025-10-25 13:35:37 UTC      

Page Views: 47 views

In this section we will introduce you to some of the configurations that useECharts to generate charts.

9.3.1. Step 1: create a HTML page

Create a HTML page and introduce echarts.min.js :

9.3.2. 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:

9.3.3. 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

9.3.4. Example

The following is a complete example:

Example

The first one ECharts
example
//
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);
   
 For more configuration items, please see:  https://echarts.apache.org/zh/option.html  
 

 
 

                    
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            9.3. ECharts configuration syntax 
                        

                    

                

            
        
        

            

    
        

            

                

                    
                        
                        
                            
Principles and Applications of WebGIS 

                        
                        
                             37
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Web框架 

                        
                        
                             942
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
WEB基础 

                        
                        
                             287
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Principles, Technologies, and Methods of Geographic Information Systems 

                        
                        
                             102
                        
                    
                    
                        

                            
 
 
 In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.