踩坑之路

• vue3中获取不到view等携带标签的dom对象，div在移动端打包后又无法使用。
• echarts滑块功能在移动端中无法适配等。

解决办法

下载适配插件，解决了dom获取跟移动端适配的问题

准备工作

• 安装echarts插件
• 安装适配插件
  

  展示代码

• 准备容器

  <view style="width: 90vw;height: 400upx;"><l-echart ref="main"></l-echart></view>

• dom获取相关配置

  import * as echarts from 'echarts';
  import {ref,onMounted , onUnmounted} from 'vue'
  const props = defineProps(['Dw','zhankuang','LineColor'])
  const main = ref(null)
  var myChart
  const option = {
  tooltip: {
      trigger: 'axis',
      // position: function (pt) {
      //     return [pt[0], '10%'];
      // },
      backgroundColor: '#dff9fb'
  },
  xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
          alignWithLabel: true
      }
  },
  dataZoom: [
      {
          type: 'slider',
          start: 0,
          end: 100,
          brushSelect:true,
          show: true,
      },
      {
          type:'inside',
          start: 0,
          end: 100,
      }
  ],
  yAxis: {
      type: 'value',
      splitLine: {
          lineStyle: {
              type: 'dashed',
              opacity: 0.2
          }
      },
      name: props.Dw
  },
  series: [
      {
          data: [15, 23, 22, 21, 13, 14, 26],
          type: 'line',
          lineStyle: {
              color: props.LineColor,
              width: 3
          },
          showSymbol: false,
      }
  ],
  };
  onMounted(()=>{
  setTimeout(async()=>{
      if(!main.value) return
      myChart = await main.value.init(echarts)
      myChart.setOption(option)
  },300)
  })
  onUnmounted(()=>{
  myChart.dispose()
  })