JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<div id ="themeChart1" class="themeChart"></div>
<div id ="themeChart2" class="themeChart"></div>

CSS

.themeChart{
  height:50vh;
  width:100vw;
}

JavaScript

const seriesName = 'A Series name';

option = {
		tooltip: {
    	show: true,
      trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        splitArea: {
        	show: true
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
    		name: seriesName,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        markArea: {
        	data: [
        		[
            	{ xAxis: 'Mon' },
              { xAxis: 'Tue' }
          	],
            [
            	{ xAxis: 'Wed' }, // This doesn't show up at all
              { xAxis: 'Wed' }
          	]
          ]
        }
    }]
};


const chart1 = echarts.init(document.getElementById('themeChart1'))
chart1.setOption(option)

option.series[0].type = 'bar';
const chart2 = echarts.init(document.getElementById('themeChart2'))
chart2.setOption(option)