Vue3中使用Echarts图表步骤-demo

安装 

npm install echarts --save

使用

对应的vue页面中使用，使用前引入echarts

但页面窗口大小改变时重新渲染图表

<template><div class="about"><h1>This is an about page</h1><divid="myEcharts"ref="myEcharts":style="{ width: '100%', height: '100%' }"></div></div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";onMounted(() => {initChart();// window.addEventListener("resize", echarts.resize());
});onUnmounted(() => {myChart.dispose();// echarts.dispose;console.log(echarts, 888);// window.onresize = null;window.removeEventListener("resize", myChart.resize);
});
let myChart = null;
// 基础配置一下Echarts
const initChart = () => {echarts.init(document.getElementById("myEcharts")).dispose();let chartDom = document.getElementById("myEcharts");myChart = echarts.init(chartDom, "dark");// 把配置和数据const myData = {xData: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",],yData: [820, 932, 901, 934, 1290, 1330, 1320, 801, 102, 230, 4321, 4129],};const conf = {xAxis: {type: "category",data: myData.xData,},tooltip: {trigger: "axis",},yAxis: {type: "value",},series: [{data: myData.yData,type: "line",smooth: true,},],};conf && myChart.setOption(conf);window.addEventListener("resize", myChart.resize);// window.onresize = function () {//   //自适应大小//   myChart.resize();// };
};
</script>