SOURCE

// 步骤3：初始化echarts实例对象
const myCharts = echarts.init(document.getElementById('container'))
// 步骤4：准备配置项
const xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const yDataArr1 = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
const option = {
    xAxis: {
        type: 'category',
        data: xDataArr,
        boundaryGap: false, // 紧挨边缘
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '销售统计',
            type: 'line',
            data: yDataArr1,
            color: 'red',
            markPoint: {
                data: [{
                    type: 'min'
                }, {
                    type: 'max'
                }]
            },
            markLine: {
                data: [
                    {
                        type: 'average'
                    }
                ]
            },
            markArea: { // 标记
                data: [
                    [
                        {
                            xAxis: '1月' // 开始
                        },
                        {
                            xAxis: '3月' // 结束
                        }
                    ]
                ]
            },
            smooth: true, // 平滑曲线
            lineStyle: { // 曲线风格
                color: 'green'
            },
            areaStyle: { // 填充风格
                color: 'pink'
            }
        }
    ],


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