vue3的vue-chart组件封装(包含数据刷新按需使用)

这篇具有很好参考价值的文章主要介绍了vue3的vue-chart组件封装(包含数据刷新按需使用)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、效果展示

v-chart封装数据更新效果

初始数据展示:

v-charts vue3,vue.js,前端,javascript

 刷新数据展示:

v-charts vue3,vue.js,前端,javascript

二、官网链接

v-chartsDescriptionhttps://v-charts.js.org/#/

三、下载依赖

npm i v-charts echarts -S / yarn add v-charts echarts -S

v-charts vue3,vue.js,前端,javascript

四、main.js/main.ts按需引入

const VueECharts = require('vue-echarts')
app.component('v-chart', VueECharts)

五、组件封装

先别急着直接定义option对象,可以参考官网这个方法:

Documentation - Apache ECharts

v-charts vue3,vue.js,前端,javascript

也就是通过实例,调用setOption这个方法,可以不通过传递props属性,而实现数据渲染;这样的好处就在于option的值是可以动态更新的,所以我们就可以把这个方法再封装一层,通过参数传进去不就简单很多。

<template>
    <v-chart class="bar-charts" autoresize ref="charts" />
</template>
<script setup>
import {defineProps, ref, onMounted, defineExpose} from 'vue'
const charts = ref()
const props = defineProps({
    option: {
        type: Object
    }
})
const setOption = (option) => {
    charts.value.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: option.colChartsName,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: option.colUnitName,
                type: 'bar',
                barWidth: '60%',
                data: option.colChartsData
            }
        ]

    })

}
onMounted(() => {
    setOption(props.option)
})
//导出方法给父组件使用
defineExpose({
    setOption
})
</script>

六、父组件使用

<flex-bar-echarts style="width:100%;height: 400px;" :option="option" ref="charts"></flex-bar-echarts>
<el-button @click="refresh">刷新数据</el-button>
import { ref } from 'vue'
const charts = ref()
const option = ref({
  colChartsName: [
    "周一",
    "周二",
    "周三",
    "周四",
    "周五",
    "周六",
    "周日",
  ],
  colChartsData: [145, 267, 876, 568, 853, 347, 164],
  colUnitName: ""
})
const refresh = () => {
  option.value.colChartsName = [
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
    "星期日",
  ]
  option.value.colChartsData = [200, 267, 300, 270, 600, 347, 164]
  //调用子组件的方法
  charts.value.setOption(option.value)
}

七、渐变色

官网API:Documentation - Apache ECharts

v-charts vue3,vue.js,前端,javascript

 八、总结

以上主要是vue3的封装方法,setup语法糖写法,大家根据自己的需求参考思路灵活调整。文章来源地址https://www.toymoban.com/news/detail-787522.html

到了这里,关于vue3的vue-chart组件封装(包含数据刷新按需使用)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3范围选择组件封装

    个人项目地址: SubTopH前端开发个人站 (自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面) SubTopH前端开发个人站 https://subtop.gitee.io/subtoph.github.io/#/home 实现效果 直接上代码 组件文件  组件使用

    2024年02月11日
    浏览(35)
  • vue3组件封装系列-表单请求

    我们在开发一些后台管理系统时,总是会写很多的列表查询页面,如果不封装组件,就会无限的复制粘贴,而且页面很冗余,正常情况下,我们都是要把组件进行二次封装,来达到我们想要效果。这里我分享一下我近期封装的关于列表的组件封装。 vue3+element-plus srccomponents

    2024年04月23日
    浏览(34)
  • 记录--Vue3 封装 ECharts 通用组件

    配置文件这里就不再赘述,内容都是一样的,主打一个随用随取,按需导入。 chartRef :当前的 DOM 节点,即 ECharts 的容器; chartInstance :当前 DOM 节点挂载的 ECharts 实例,可用于调用实例上的方法,注册事件,自适应等; draw :用于绘制 ECharts 图表,本质是调用实例的 setOptio

    2024年02月09日
    浏览(46)
  • vue3组件二次封装Ui处理

    在Vue开发中,我们常常需要使用UI框架提供的组件。但是UI框架的组件可能并不符合我们的需求,这时候就需要进行二次封装。下面是一些关于Vue组件二次封装Ui处理的技巧: 子组件代码: 父组件使用: 如果使用props接收弊端: 基本上组件不会只有一两个属性,属性多的话接

    2023年04月14日
    浏览(83)
  • vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

    技术栈 :Vue3 + Ts + Vite + Echarts 简介 : 图文详解,教你如何在 Vue3 项目中 引入Echarts , 封装Echarts组件 ,并实现常用Echarts图例 1.1 静态效果 1.2 动态效果 2.1 安装 Echarts npm: pnpm: 2.2 main.ts 中引入 2.3 Echarts 组件封装 /src/components/ReEcharts/index.vue 文件中写入如下代码 3.1 柱状图 实现

    2024年02月09日
    浏览(63)
  • vue3自定义封装组件:消息提示、轮播图、加载更多、骨架屏组件

    定义组件:src/components/library/xtx-infinite-loading.vue 注册组件:src/components/library/index.js  引用组件:src/main.js 使用组件: .vue文件 首先是轮播图的样式:src/components/library/xtx-carousel.vue  然后是轮播图的结构与逻辑封装:src/components/library/xtx-carousel.vue 插件注册:src/components/library

    2024年02月12日
    浏览(46)
  • Vue3 + Element Plus 封装公共表格组件(带源码)

    由于项目中有很多菜单都是列表数据的展示,为避免太多重复代码,故将 Element Plus 的 Table 表格进行封装,实现通过配置展示列表数据 支持自动获取表格数据 支持数据列配置及插槽 支持操作列配置及插槽 支持多选框配置 支持表尾配置及插槽 支持分页显示 3.1 复制基本表格

    2024年02月08日
    浏览(87)
  • vue3封装element-ui-plus组件

    最近看视频学习封装公共组件,将学习的内容记录以下,方便以后cv。 下面跟未来的自己说:         先说思路再放代码嗷,我怕你以后忘了。要cv直接往最后拉。 思路:         其实主要是通过slot去接收父组件传递过来的模板。父组件引用了组件件,往里面传了个表单,

    2024年02月09日
    浏览(67)
  • 基于Vant组件库二次封装组件(TS+Vue3.x环境)

    1. 今天的需求是封装一个 Navigation Bar 导航栏组件,目的是给到App几乎所有的页面复用:      2. 因为之前的项目里使用过Vant组件库,笔者第一时间想到了Vant组件库中的 NavBar 组件,和当前App的需求匹配度很高。Vant组件库的 NavBar 组件: 3. 相信你也发现了,Vant组件库默认主题

    2023年04月18日
    浏览(54)
  • vue3中播放flv流视频,以及组件封装超全

    实现以上功能的播放,只需要传入一个流的地址即可,当然组件也只有简单的实时播放功能 下面直接上组件 里面的flvjs通过npm i flv.js直接下载    这里我封装了两个组件   ,一个是单个的播放,另外一个是窗口切换的  这个是窗口切换的组件  下面是实际使用方法 因为上面

    2024年04月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包