vue3项目中使用echarts

echarts安装

npm install --save echarts

echarts使用

<template>
    <div class="qi">
        <div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onBeforeUnmount, onMounted, reactive } from 'vue';
const state = reactive({
    option: {
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: ["芳草地国际","实验小学","白家庄小学","外国语小学","师范学校附属","望京东园"],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '学校',
              type: 'bar',
              barWidth: '40%',
              data: [260,680,360,460,150,320],
            },
          ],
        },

})
const initeCharts = () => {
    let myChart = echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption(state.option)
}


const resizeMychart = () => {
    echarts.init(document.getElementById('myChart')).resize();
}
onMounted(() => {
    initeCharts()
    window.addEventListener("resize", resizeMychart)
})
onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeMychart)
})
</script>
<style lang="scss" scoped>
.qi {
    width: 100%;
    height: 100%;
}
</style>

其中resizeMychart方法是让柱状图根据页面的尺寸大小实时变化。
最终效果图如下：