ECharts Configuration Syntax

This chapter will introduce some configurations for using ECharts to generate charts.

Step 1: Create an HTML Page

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js.html"></script>
</head>
</html>

Step 2: Prepare a DOM container with height and width for ECharts

In the example, the div with id "main" is used to contain the chart drawn by ECharts:

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

Step 3: Set Configuration Information

The ECharts library uses JSON format for configuration.

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

Here, option means using configuration in JSON data format to draw the chart. The steps are as follows:

Title

Configure the title for the chart:

title: {
    text: '第一个 ECharts 实例'
}

Tooltip

Configuration tips:

tooltip: {},

Legend Component

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

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

X Axis

Configure the items to be displayed on the X-axis:

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

Y Axis

Configure the items to be displayed on the Y-axis.

yAxis: {}

Series List

Each series determines its own chart type through type:

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

Each series determines its own chart type through type:

type: 'bar': Bar/Column chart
type: 'line': Line/Area chart
type: 'pie': pie chart
type: 'scatter': Scatter (bubble) chart
type: 'effectScatter': Scatter (bubble) with ripple effect animation
type: 'radar': Radar Chart
type: 'tree': Tree Chart
type: 'treemap': Tree Chart
type: 'sunburst': Sunburst Chart
type: 'boxplot': Box Plot
type: 'candlestick': K-line Chart
type: 'heatmap': Heatmap
type: 'map': map
type: 'parallel': Series for parallel coordinates
type: 'lines': line chart
type: 'graph': Relation Graph
type: 'sankey': Sankey Diagram
type: 'funnel': Funnel Chart
type: 'gauge': Dashboard
type: 'pictorialBar': Pictorial bar chart
type: 'themeRiver': ThemeRiver
type: 'custom'Custom series

Example

The following is a complete example:

Example

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>First ECharts Example</title>  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript">// Based on the prepared DOM, initialize the ECharts instance 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", "Wool Sweater", "Chiffon Blouse", "Pants", "High Heels", "Socks"] }, yAxis: {}, series: [{ name: 'Sales', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // Use the configuration items and data just specified to display the chart. myChart.setOption(option);</script> </body> </html>

Try it Yourself »

Click the "Try it" button to view the online example

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

other extensions