ECharts Configuration Syntax

In this section, we will introduce some configurations for generating charts using ECharts.

Step 1: Create an HTML Page

Create an HTML page and include echarts.min.js:

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

Step 2: Prepare a DOM Container with Dimensions for ECharts

The div with id main in the example is used to contain the chart drawn by ECharts:

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

Step 3: Set Configuration Information

ECharts uses JSON format for configuration.

echarts.init(document.getElementById('main')).setOption(option);

Here, option represents the configuration in JSON format to draw the chart. Steps are as follows:

Title

Configure the title for the chart:

title: {
    text: 'First ECharts Example'
}

Tooltip

Configure the tooltip:

tooltip: {},

Legend Component

The legend component displays different series' symbols, colors, and names. You can control which series are not displayed by clicking the legend.

legend: {
    data: [{
        name: 'Series 1',
        // Force the icon to be a circle.
        icon: 'circle',
        // Set the text color to red
        textStyle: {
            color: 'red'
        }
    }]
}

X Axis

Configure the items to be displayed on the X axis:

xAxis: {
    data: ["Shirt","Sweater","Blouse","Pants","High Heels","Socks"]
}

Y Axis

Configure the items to be displayed on the Y axis.

yAxis: {}

Series List

Each series determines its chart type through type:

series: [{
    name: 'Sales',  // Series name
    type: 'bar',  // Series chart type
    data: [5, 20, 36, 10, 10, 20]  // Data within the series
}]

Each series determines its chart type through type:

type: 'bar': Bar chart
type: 'line': Line/area chart
type: 'pie': Pie chart
type: 'scatter': Scatter (bubble) chart
type: 'effectScatter': Scatter (bubble) chart with ripple animation
type: 'radar': Radar chart
type: 'tree': Tree chart
type: 'treemap': Tree map
type: 'sunburst': Sunburst chart
type: 'boxplot': Boxplot chart
type: 'candlestick': Candlestick chart
type: 'heatmap': Heatmap chart
type: 'map': Map chart
type: 'parallel': Parallel coordinate series
type: 'lines': Line chart
type: 'graph': Graph chart
type: 'sankey': Sankey chart
type: 'funnel': Funnel chart
type: 'gauge': Gauge chart
type: 'pictorialBar': Pictorial bar chart
type: 'themeRiver': Theme river chart
type: 'custom': Custom series

Example

Below is the complete example:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>First ECharts Example</title>
    <!-- Include echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- Prepare a DOM with dimensions (width and height) for ECharts -->
    <div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    // Initialize the echarts instance based on the prepared dom
    var myChart = echarts.init(document.getElementById('main'));

    // Specify the configuration items and data for the chart
    var option = {
        title: {
            text: 'First ECharts Instance'
        },
        tooltip: {},
        legend: {
            data:['Sales']
        },
        xAxis: {
            data: ["Shirt","Sweater","Blouse","Pants","High Heels","Socks"]
        },
        yAxis: {},
        series: [{
            name: 'Sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // Display the chart using the configuration items and data above
    myChart.setOption(option);
</script>
</body>
</html>

Click the "Try It" button to view the online example.

For more configuration options, refer to: https://echarts.apache.org/en/option.html

❮ Echarts Style Echarts Install ❯