SOURCE

// 步骤3：初始化echarts实例对象
const myCharts = echarts.init(document.getElementById('container'))
// 步骤4：准备配置项
const option = {
    xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '语文',
            type: 'bar',
            data: [70, 92, 87],
            itemStyle: {
                color: {
                    type: 'linear', // 线性渐变
                    x: 0,
                    y: 0, // 左上角为（0，0）
                    x2: 1,
                    y2: 1, // 右下角为（1，1）
                    colorStops: [
                        {
                            offset: 0,
                            color: '#17ead9' // 0% 的颜色
                        },
                        {
                            offset: 1,
                            color: '#6078ea' // 100% 的颜色
                        }
                    ]
                }
            }
        }
    ]
}
// 步骤5：将配置项设置给echarts实例对象
myCharts.setOption(option)

  <!-- 
  步骤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);
}