在vue3.x中使用echarts

在vue3.x中使用echarts

---

注意点：

• 首先有一个宽高的容器。(container)
• 每次绘制之前需要初始化.(init)
• 必须设置配置，否则无从绘制（option）
• 改变数据时必须传入改变的数据，否则监听不到新数据。(setOption)

step1.使用npm安装

npm install echarts --save

step2.直接在vue文件里面导入使用

比如我要在about.vue单文件里面使用echarts进行绘制图表，那么直接在about.vue里面导入echarts，不用再去main.js里面全局引入。

demo

​ step1.绘制一个宽高的容器

<!-- About.vue-->
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="container" ref="chart">

    </div>
  </div>
</template>
<script setup>
    
</script>
<style scoped>
#container{
    box-sizing: border-box;
    height: 400px;
    width: 80%;
    margin: 0 auto;
    background-color: green;
}
</style>

step2.完整代码

<template>
  <div class="about">
    <h2 >This is an about page</h2>
    <div id="container" ref="chart">

    </div>
  </div>
</template>
<script setup>
import {  onMounted, reactive, ref } from "@vue/runtime-core"
import * as echarts from 'echarts'

//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts = reactive({});
//4.定义好echarts的配置数据
let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    }, //X轴
    yAxis: { 
        type: 'value' 
    }, //Y轴
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
        }], //配置项
}

//onMounted钩子函数
onMounted(()=>{
    //初始化echarts
    init();
})

//初始化echarts实例方法
const init = ()=>{
    //3.初始化container容器
    myEcharts= echarts.init(chart.value);
    //5.传入数据
    myEcharts.setOption(option);
    //additional：图表大小自适应窗口大小变化
    window.onresize = ()=>{
        myEcharts.resize();
    }
}

</script>
<style scoped>
#container{
    box-sizing: border-box;
    height: 400px;
    width: 80%;
    margin: 0 auto;
}
</style>