先上效果图

 

图表容器

<div id="leftChart" style="height: 28vh"></div>
<div id="rightChart" style="height: 28vh"></div>

 

 监听resize视图窗口大小，可以让chart图表自适应大小

const leftChart = () => {const chartBox = echarts.init(document.getElementById('leftChart')) const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},legend: {data: ['平均外温', '平均室温', '日供热量', '预测日供热量']},xAxis: [{type: 'category',data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '供热量',min: 0,max: 1000.0,interval: 200.0,axisLabel: {formatter: '{value} GJ'}},{type: 'value',name: '温度',min: 5,max: 30,interval: 5,axisLabel: {formatter: '{value} °C'}}],series: [{name: '平均外温',type: 'line',smooth: true,yAxisIndex: 1,tooltip: {valueFormatter: function (value: any) {return value + ' °C'}},data: [12.0, 12.2, 13.3, 14.5, 16.3, 10.2, 10.3]},{name: '平均室温',type: 'line',smooth: true,yAxisIndex: 1,tooltip: {valueFormatter: function (value: any) {return value + ' °C'}},data: [21.0, 21.2, 23.3, 24.5, 26.3, 20.2, 20.3]},{name: '日供热量',type: 'bar',tooltip: {valueFormatter: function (value: any) {return value + ' GJ'}},data: [200.0, 400.9, 700.0, 230.2, 250.6, 760.7, 135.6]},{name: '预测日供热量',type: 'bar',tooltip: {valueFormatter: function (value: any) {return value + ' GJ'}},data: [200.6, 500.9, 900.0, 260.4, 280.7, 700.7, 175.6]}]}option && chartBox.setOption(option)window.addEventListener('resize', function () {chartBox.resize()})
}
const rightChart = () => {const chartBox = echarts.init(document.getElementById('rightChart'))const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},legend: {data: ['平均外温', '日供热量', '预测日供热量']},xAxis: [{type: 'category',data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '排放量',min: 0,max: 1000.0,interval: 200.0,axisLabel: {formatter: '{value} t'}},{type: 'value',name: '温度',min: 5,max: 30,interval: 5,axisLabel: {formatter: '{value} °C'}}],series: [{name: '平均外温',type: 'line',smooth: true,yAxisIndex: 1,tooltip: {valueFormatter: function (value: any) {return value + ' °C'}},data: [12.0, 12.2, 13.3, 14.5, 16.3, 10.2, 10.3]},{name: '日供热量',type: 'bar',tooltip: {valueFormatter: function (value: any) {return value + ' GJ'}},data: [200.0, 400.9, 700.0, 230.2, 250.6, 760.7, 135.6]},{name: '预测日供热量',type: 'bar',tooltip: {valueFormatter: function (value: any) {return value + ' GJ'}},data: [200.6, 500.9, 900.0, 260.4, 280.7, 700.7, 175.6]}]}option && chartBox.setOption(option)window.addEventListener('resize', function () {chartBox.resize()})
}leftChart()rightChart()