vue3中echart的使用

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官网