vue3+h5+echarts引入折线图

 实现效果：

1.引入echarts，在终端输入命令

npm install echarts --save

2.安装成功后直接复制以下代码即可

<template>  
  <div ref="chartDom" class="echart" id="main"></div>  
</template>  
  
<script setup>  
import { onMounted, ref } from 'vue';  
import * as echarts from 'echarts';  
  
const chartDom = ref(null);  
let myChart = null;  
  
onMounted(() => {  
  myChart = echarts.init(chartDom.value);  
  const option = {  
    xAxis: {  
      type: 'category',  
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
    },  
    yAxis: {  
      type: 'value'  
    },  
    series: [  
      {  
        data: [150, 230, 224, 218, 135, 147, 260],  
        type: 'line'  
      }  
    ]  
  };  
  myChart.setOption(option);  
});  
  
// 如果需要在组件卸载时销毁 ECharts 实例，可以使用 onUnmounted 钩子  
import { onUnmounted } from 'vue';  
onUnmounted(() => {  
  if (myChart) {  
    myChart.dispose();  
  }  
});  
</script>  
  
<style scoped>  
.echart {  
  width: 600px;  
  height: 400px;  
}  
</style>