9.3. ECharts configuration syntax

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 :

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Introducing ECharts files -->
    <script src="echarts.min.js"></script>
</head>
</html>

    

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:

     <body>
    <!-- Prepare a DOM with size (width and height) for ECharts -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

    

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

     <!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