SOURCE

// 步骤3：初始化echarts实例对象
const myCharts = echarts.init(document.getElementById('container'))
// 步骤4：准备配置项
const xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
const yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
const option = {
    xAxis: {
        type: 'category',
        data: xDataArr
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '语文',
            type: 'bar',
            data: yDataArr,
            color: 'red',
            markPoint: {
                data: [{
                    name: '最小值',
                    type: 'min'
                }, {
                    name: '最大值',
                    type: 'max'
                }]
            },
            markLine: {
                data: [{
                    name: '平均值',
                    type: 'average'
                }]
            }
        }
    ],
    title: { // 标题设置
        text: 'Score', // 标题文字
        textStyle: {
            color: 'red', // 标题文字颜色
        },
        borderWidth: 5, // 标题边框宽度
        borderColor: 'blue', // 标题边框颜色,
        borderRadius: 5, // 标题边框圆角
        left: 50, // 距离左边的距离
        top: 10, // 距离顶部的距离
    },
    tooltip: {
        trigger: 'axis', // item 每个柱体，axis 坐标轴
        tirggerOn: 'click', // 触发时机
        formatter: `{b} is {c}`
    }
}
// 步骤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);
}