9.3. ECharts configuration syntax

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

Page Views: 9 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 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289