Vue3使用ECharts的曲线条形堆叠混合图

先上效果图

 

图表容器

<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()