Echarts 组件封装的 3种模板

一、安装echarts

npm install echarts --save

二、在需要的页面引入

import * as echarts from "echarts"

三、创建组件

1、模板1：vue2+javascript

<template>
    <div>
        <div class="echart_size" :id="id"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    props: {
        // 接收的参数
        id: {
            type: String,
            default: ''
        },
        datas: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            // 变量
        }
    },
    created() {
        this.$nextTick(() => {
            this.barBtn()
        })
    },
    methods: {
        barBtn() {
            let myChart = echarts.init(document.getElementById(this.id))
            let option = {
                // 某图表
            }
            myChart.setOption(option)
            // 让图表跟随屏幕自动的去适应
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.echart_size{
    width: 500px;
    height: 500px;
}
</style>

2、模板2：vue3+javascript

<template>
    <div class="echart_size" :id="props.id"></div>
</template>

<script setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
    id: {
        type: String,
        required: true
    },
    datas:{
        type: Array,
        required: true
    }
})

let person=reactive({
    // 初始变量
})

onMounted(()=>{
    GetEchar()
})

const GetEchar = () => {
    const myCharts = ref()
    nextTick(() => {
        const chartDom = document.getElementById(props.id)
        myCharts.value = echarts.init(chartDom)
        let option = {
           // 某图表
        };
        myCharts.value.setOption(option)
        // 让图表跟随屏幕自动的去适应
        window.addEventListener('resize', function () {
            myCharts.value.resize()
        })
    })
}

</script>

<style lang="scss" scoped>
.echart_size {
    width: 100%;
    height: 100%;
}
</style>

3、模板3：vue3+typescript

<template>
    <div class="echart_size" :id="props.id"></div>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
let person: any = reactive({
    // 初始变量
})
type Props = {
    id: string
}
const props = withDefaults(defineProps<Props>(), {})

onMounted(()=>{
    GetEchar()
})
const GetEchar = () => {
    const myChart = ref<HTMLElement>()
    const myCharts = ref<any>()
    nextTick(() => {
        const chartDom = document.getElementById(props.id)!
        myCharts.value = echarts.init(chartDom)
        let option = {
           
        };
        myCharts.value.setOption(option)
        // 让图表跟随屏幕自动的去适应
        window.addEventListener('resize', function () {
            myCharts.value.resize()
        })
    })
}

</script>

<style lang="scss" scoped>
.echart_size {
    width: 500px;
    height: 500px;
}
</style>

四、页面调用

1、vue2

<template>
  <div>
    <EchartModule :id="'myEchart'" :datas="data" />
  </div>
</template>

<script>
  import EchartModule from '@/components/echartModule'
  export default {
    components: {EchartModule},
    data(){
      return{
        data: [
            { value: 0, label: '测试1' },
            { value: 1, label: '测试2' }
        ]
      }
    }
  }
</script>

2、vue3+js

<template>
   <EchartModule :id="'myEchart'" :datas="data" />
</template>

<script setup>
import { reactive } from 'vue'
import EchartModule from '@/components/echartModule'
let person=reactive({
  data:[
     { value: 0, label: '测试1' },
     { value: 1, label: '测试2' }
  ]
})
</script>

3、vue3+ts

// vue3+ts
<template>
   <EchartModule :id="'myEchart'" :datas="data" />
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import EchartModule from '@/components/echartModule'
let person:any=reactive({
  data:[
     { value: 0, label: '测试1' },
     { value: 1, label: '测试2' }
  ]
})
</script>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~