vue3+ts中使用封装后的echarts。适合小白（报错的也可以看Initialize failed: invalid dom.）

Myth丶恋晨 2022-09-16 13:25 10阅读 0赞

## 封装的echarts ##

userEach.ts
    import {  ref, nextTick } from 'vue'
    import * as echarts from 'echarts'
    //这个方法，接收一个option和dom的id
    //目的：用的时候只需要传option和dom的id就能绘制出一个图表，很适合我们小白刚开始学函数的用法
    export default function useEchar (option:object, name:string) { 
      const myChart = ref<HTMLElement>() // 也可以用const myChart = ref<any>();
      console.log(myChart)
      const myCharts = ref<any>()
      // 绘制什么取决于option
      //用这个原因是防止出现 Initialize failed: invalid dom.报错
      nextTick(() => { 
        const chartDom = document.getElementById(name)!
        myCharts.value = echarts.init(chartDom)
        myCharts.value.setOption(option)
      })
    }

## 对应的组件使用（我用的是app.vue） ##

<template>
      <div class="container">
        <div id="main" :style="{ width: '300px', height: '300px' }"></div>
      </div>
    </template>
    
    <script lang='ts'>
    import {  ref, onMounted } from 'vue'
    import useEchar from './hook/userEcharts'
    export default { 
      setup () { 
        const myChart = ref()
        const option = { 
          xAxis: { 
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: { 
            type: 'value'
          },
          series: [
            { 
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        }
        //用这个原因是防止出现 Initialize failed: invalid dom.报错
        onMounted(() => { 
        //现在就是调用方法那么简单
          myChart.value = useEchar(option, 'main')
        })
        return { 
          myChart
        }
      }
    }
    </script>
    <style lang="less" scope>
    .container { 
      width: 100%;
      height: 93vh;
      position: relative;
    }
    </style>