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>

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

相关推荐
Vicky&James4 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_748233648 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟17 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386317 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596018 分钟前
前端代理,解决跨域问题讲解
前端
quitv23 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238132 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星33 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端