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>

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

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5206 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20506 小时前
LeaferJS好用的 Canvas 引擎
前端·开源