在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>