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'
                }]
            }
        }
    ],
    toolbox: {
        feature: {
            saveAsImage: {}, // 保存为图片
            dataView: {}, // 数据视图
            restore: {}, // 重置
            dataZoom: {}, // 区域缩放
            magicType: {
                type: ['bar', 'line']
            } // 动态表类型切换
        }
    }

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