vue3中echart的使用
设置echart接收容器
<div ref="ehart_ref" style="height: 400px;"></div>
引入echart并使用,注:需等元素挂载完成才能进行对echart进行初始化,以免找不到dom导致初始化失败
<script setup>
import { ref,onMounted} from "vue";
import * as echarts from 'echarts'
const echart_ref=ref(null) //创建与dom节点ref名称相同的ref变量,相当于接收到了这个dom节点
onMounted(()=>{
chartFn()
})
//绘制图表
const chartFn=()=>{
let echart=''
let data1=[20221019,20221020,20221021,20221022,20221023]
let data2=[2,2,2,1,1]
let data3=[2,2,3,1,0]
echart=echarts.init(echart_ref.value)
let options={
title:{
text:'订餐份数统计'
},
xAxis:{//x轴
type:'category',//category表示为类目轴
data:data1
},
yAxis:{//y轴
type:'value',//value表示为数值轴
minInterval: 2//最小间隔
},
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow',//阴影指示器
label:{
show:true
}
}
},
legend:{ //show:true可省略不写,只要配置了,默认就为true
},
series:[{
type:'bar',
name:'午餐',
data:data2
},
{
type:'bar',
name:'晚餐',
data:data3
}
]
}
echart.setOption(options)
}
结果如图所示
更多使用示例可前往echart官网查看 echart官网