Echarts柱状图带折线图

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
// const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(() => {
  init()
})

function init() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('Line'))
  const area = [
    {
      name: '初一',
      value: 82
    },
    {
      name: '初二',
      value: 64
    },
    {
      name: '初三',
      value: 32
    },
    {
      name: '高一',
      value: 64
    },
    {
      name: '高二',
      value: 81
    },
    {
      name: '高三',
      value: 47
    }
  ]
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '今日学校运动汇总',
      left: 'center',
      textStyle: {
        color: '#f8f7f7'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      top: '25%',
      right: '5%',
      left: '5%',
      bottom: '7%'
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    legend: {
      data: ['跑步', '打篮球', '立定跳远', '今日运动总人数'],
      top: '10%',
      textStyle: {
        color: '#f8f7f7'
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        // prettier-ignore
        data: area.map((a) => a.name )
      }
    ],
    yAxis: [
      // {
      //   type: 'value',
      //   position: 'left',
      //   min: 0,
      //   alignTicks: true,
      //   axisLabel: {
      //     formatter: '{value}'
      //   }
      // }
      {
        type: 'value',
        name: '总数',
        position: 'right',
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#eab263'
          }
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        name: '总数',
        position: 'left',
        alignTicks: true,
        axisLine: {
          show: true
        },
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '跑步',
        type: 'bar',
        yAxisIndex: 1,
        color: '#b6f19d',
        data: [16, 39, 20, 10, 19, 36]
      },
      {
        name: '打篮球',
        type: 'bar',
        yAxisIndex: 1,
        color: '#a9a3e5',
        data: [19, 28, 19, 18, 38, 24]
      },
      {
        name: '立定跳远',
        type: 'bar',
        yAxisIndex: 1,
        color: '#2c8bc5',
        data: [23, 12, 32, 26, 26, 12]
      },
      {
        name: '今日运动总人数',
        type: 'line',
        color: '#eab263',
        yAxisIndex: 0,
        data: [140, 143, 103, 118, 164, 119]
      }
    ]
  }

  myChart.setOption(option)
}
</script>

<template>
  <div id="Line" style="height: 300px; align-content: center"></div>
</template>

效果示例：