Vue3中使用echarts图表

注意：本示例代码为vue3，echart版本为5.4.3

官方文档：https://echarts.apache.org/zh/index.html 

一.引入echart到vue项目中

npm i echarts

二.示例代码

注意：一定要给echart的容器设定宽高，不然是出不来的

<template>

  <div

    id="my_echart"

    class="echarts"

  ></div>

</template>

<script setup>

import * as echarts from "echarts"; //引入

import { onMounted, onUnmounted} from "vue";

let myEcharts;

onMounted(() => {

  initEcharts();

});

onUnmounted(() => {

  if (myEcharts) {

    window.removeEventListener("resize", myEcharts.resize);

    myEcharts.dispose();

  }

});

function initEcharts() {

  myEcharts = echarts.init(document.getElementById("my_echart"));

  myEcharts.setOption({

          xAxis:{

                type:"category", //类型为折线图

                data:["周一","周二","周三","周四"]                 

        },

          yAxis:{

                type:"value"

        },

           series:[

        {

        data:[12,45,10,35], //y轴数值

        type:"line" 

        }        

        ]

      }

  // 大小自适应窗口大小变化

  window.onresize = function () {

    // 重置容器高宽

    myEcharts.resize();

  };

}

</script>

<style scoped>

.echarts {

  width: 300px;

  height:200px;

  /* width: 100%; 

  height: 100%; */

}

</style>

如果为了将echart作为组件放到其他地方时可以撑满父容器，可以将上述代码中的宽高设置成100%