vue3.0中引入echarts(ref获取dom)

前言：

        vue3.0中的方法和echarts升级到5以后的方法都有改变。

vue3.0官方入口
echart5官方入口

目录:

实现效果：

方法一：使用id来绑定页面dom，引入echart

操作步骤：

1、引入echart

2、页面上定义dom

3、具体方法

4、样式

方法二：使用ref来绑定页面dom，引入echart

操作步骤：

1、引入echart

2、页面上定义dom

3、具体方法

4、样式

---

实现效果：

方法一：使用id来绑定页面dom，引入echart

操作步骤：

1、引入echart

cnpm i --save echarts

import * as echarts from 'echarts';

2、页面上定义dom

<template>
  <div id="echartLine" class="echartDiv">
    折线图
  </div>
</template>

3、具体方法

import { onMounted } from 'vue';

export default {
  setup(){
    const echartInit = () =>{
      var myChart = echarts.init(document.getElementById('echartLine'));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        legend: {
          data:['会员登录次数']
        },
        xAxis: {
          data: state.xAxisData
        },
        yAxis: {},
        series: [{
          name: '会员登录次数',
          type: 'bar',
          data: state.yAxisData
        }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    //挂载
    onMounted(()=>{
      echartInit()
    })

    return {

      echartInit
    };
  }
}

4、样式

<style lang='scss' scoped>
  .echartDiv{
    width: 100%;
    height: 400px;
  }
</style>

方法二：使用ref来绑定页面dom，引入echart

操作步骤：

1、引入echart

cnpm i --save echarts

import * as echarts from 'echarts';

2、页面上定义dom

<template>
  <div id="echartLine" class="echartDiv">
    折线图
  </div>
</template>

3、具体方法, 注意需要引入ref,  toRefs

<script>
import * as echarts from 'echarts';
import { onMounted,toRefs, ref,reactive } from 'vue';
export default {
  setup(){
    let state = reactive({
      xAxisData:['浩星','妍仔','哆啦a梦','李强','王颖','老王'],
      yAxisData:[4,22,1,11,23,11],
      echart: ref(),
    })

      let echart = ref(null);
    const echartInit = () =>{;
      var myChart = echarts.init(state.echart);
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        legend: {
          data:['会员登录次数']
        },
        xAxis: {
          data: state.xAxisData
        },
        yAxis: {},
        series: [{
          name: '会员登录次数',
          type: 'bar',
          data: state.yAxisData
        }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    //挂载
    onMounted(()=>{
      echartInit()
    })

    return {
      ...toRefs(state),

      echartInit
    };
  }
}
</script>

4、样式

<style lang='scss' scoped>
  .echartDiv{
    width: 100%;
    height: 400px;
  }
</style>