YouTip

# ECharts Configuration Syntax In this chapter, 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: ### Step 2: Prepare a DOM Container with Width and Height for ECharts In the example, the div with id "main" is used to contain the chart drawn by ECharts: ### Step 3: Set Configuration Information The ECharts library uses json format to configure. echarts.init(document.getElementById('main')).setOption(option); Here option represents the configuration using json data format to draw the chart. The steps are as follows: **Title** Configure the title for the chart: title: { text: 'First ECharts Example'} **Tooltip** Configure tooltip: tooltip: {}, **Legend Component** The legend component displays the symbols, colors, and names of different series. You can click on the legend to control which series are not displayed. legend: { data: [{ name: 'Series1', // Force set the graphic to circle. icon: 'circle', // Set text to red textStyle: { color: 'red' } }]} **X Axis** Configure the items to display on the X axis: xAxis: { data: ["Shirt","Woolen Sweater