首页 > 其他分享 >element 表格自动轮播、echarts部分属性

element 表格自动轮播、echarts部分属性

时间:2022-10-13 15:35:15浏览次数:51  
标签:轮播 series 距离 element divData scrollTop table echarts

首先给<el-table>标签加上ref=“table”

const table = this.$refs.table
                    // 拿到表格中承载数据的div元素
                    const divData = table.bodyWrapper
                    // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
                    setInterval(() => {
                        // 元素自增距离顶部1像素
                        divData.scrollTop += 2;
                        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                            // 重置table距离顶部距离
                            divData.scrollTop = 0;
                        }
                    }, 50)
然后需要加入鼠标移入移出暂停继续的可以加上 最后再beforeDestroy声明周期中清除定时器
echarts改变信息提示框的文字样式:tooltip :{ backgroundColor:red;textStyle:{ color:wihte; fontSize:18px } }
echarts统计图的位置:series - center - [ , ]
echarts文字注解的位置:option - legend :{ top right x y }距离top多少距离,距离right多少距离,x、y的属性值可以为center,表示在某个轴上居中
echarts饼图的半径 series - radius :[ , ](一个值表示为扇形,两个值表示为圆环)
echarts文字注解的排列方式 option - legend - orient :horizontal/vertical
echarts添加饼图之间的间隙 - series - borderWidth : 5,borderColor : 与容器背景颜色一致

标签:轮播,series,距离,element,divData,scrollTop,table,echarts
From: https://www.cnblogs.com/kaoo-kiee/p/16788279.html

相关文章

  • elementui table动态显隐列
    效果图如下:  1.html部分列设置弹出:<el-popoverplacement="bottom"width="300"trigger="click"><div><el-che......
  • element-ui的el-input设置number类型后的相关问题
    element-ui的el-input,设置type="number"后,后边会多一个上下箭头,并且在中文输入法输入数据的时候,光标上移!! 前端的强迫症啊(凭啥你这输入框和别人的不一样,凭啥你光标就......
  • Element UI tree组件总结
    tree组件折叠//关闭弹窗时,折叠组织树(耗时操作)for(vari=0;i<this.$refs.tree.store._getAllNodes().length;i++){this.$refs.tree.store._getAllNodes()[i......
  • ajax 请求队列解决方案并结合elementUi做全局加载状态
    全本下载地址ajax文件入口可发送blob文档流,form表单与通常json解决方案结合消息队列(messagelist)与elementUi(Loading)制作请求加载方案拥有post默认请求......
  • ElementPlus的MessageBox自动关闭
    <template><el-rowclass="mb-4"><el-button@click="open"type="primary"show-confirm-button="false">Click</el-button></el-row></template><scripts......
  • 2022-10-12 vue+uniapp+echarts 使用记录
    第一步:安装echartsnpmiecharts第二步:在main.js引入echartsimportechartsfrom'echarts'Vue.prototype.$echarts=echarts第三步:在项目中使用<template>......
  • 2022-10-12 vue+uniapp+echarts 报错日志
    这里是vue+uniapp+echarts报错日志报错一:.initisundefined初始化图表失败,请检查你的echarts是否安装成功成功==》请检查你当前安装的版本是否过高,是==》降低版本(比......
  • pyecharts
    如果想要做出数据可视化效果图,可以借助pyecharts模块来完成Echarts 是个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可.而 Pyt......
  • echarts的x轴文字太长导致每隔一列的文本不显示解决方案
    如下图所示,文本过长导致偶数列文本隐藏,对此强制显示隐藏文本的的方法是:xAxis:axisLabel:{interval:0}}  ......
  • element-ui的form表单验证如何给动态的prop
    <template><el-form:model='queryForm'ref='queryForm'><divv-for="(item,index)inqueryForm.tags"><el-form-item:prop="`tags[${inde......