SOURCE

// 步骤3：初始化echarts实例对象
const myCharts = echarts.init(document.getElementById('container'))

let xAxisData

let yAxisData

myCharts.showLoading() // 展示加载动画

setTimeout(() => {
    // 步骤4：准备配置项
    const option = {
        xAxis: {
            type: 'category',
            data: ['小明', '小红', '小王']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: [70, 92, 87]
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
    myCharts.hideLoading() // 隐藏加载动画
}, 1000)

  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->

   <!-- 步骤2：准备一个呈现图表的盒子 -->
   <div id="container"></div>

#container {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg,#fce38a,#f38181);
}