首页仪表盘echarts _封装万能表单组件

最新推荐文章于 2024-03-18 21:10:14 发布
最新推荐文章于 2024-03-18 21:10:14 发布
阅读量169 收藏 1
点赞数
分类专栏： 信贷后台管理系统 文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41283785/article/details/130634164
版权

响应式布局
element -ui 找到layout布局 – 分栏间隔
gutter:间隔
span：列数

<el-row :gutter = "20">
	<el-col  :span = "6">
		<div class="grid-content bg-purple"></div>
	</el-col>
</el-row>

在这里插入图片描述
设置响应式
设置list数据

data() {
		return {
				list: [
         			{val:'13594', color:'#67ca3a', title:'最高可借金额'},
					{val:'9833',color:'#ff6600'，title: '回报率'},
					{val:'8888',color:'#f56c6c'，title: '业绩领跑'},
					{val:'6666',color:'#409eff',title:'安稳底薪'} ]	
}}}

先用for循环

<el-col :span="6" v-for = "(item,index) in list" :key = "index" > 
<div  class="dashboard-item" :style = {background: item.color}></div>
</el-col>

style下

.dashboard-item {
	height:100px
}

响应式

<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24"
v-for = "(item,index) in list" :key = "index" > 
<div  class="dashboard-item" :style = {background: item.color}>
{{item.title}}
{{item.value}}
</div>
</el-col>

设置样式
添加p

<p>{{item.title}}</p>

样式:
注意margin

.dashboard-item {
	font-weight:bold;
	color:#fff;
	>p {
	color: black;
	height:40px;
	margin:0px;
}}

在这里插入图片描述
在这里插入图片描述

动态数字
安装

npm install vue-count-to

在这里插入图片描述

开始，结束，持续时间

import countTo from 'vue-count-to';
components: {countTo}

<countTo :startVal="0" :endVal="item.val" :duration="3000">

在这里插入图片描述
echarts

  <div class="echarts-box">
	<div class="echart1"></div>
	<div class="echart2"></div>
	<div class="echart3"></div>
</div>

需要根元素，加一个div就可以
样式
高度塌陷

.echarts-box {
	.chart1 {
			width:100%;
	}
	.chart3,.chart2 {
		width:50%;
		height:400px
	}
	.echart2 {
		float:left;	
}
	.chart3 {
		float:right
}
	overflow: hidden;
}

echarts官网

methods: {
	initCharts() {
 initCharts() {
      let option1 = {
        title: {
          text: '第一个图表'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      let posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      let app = {};

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          this.chart2.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      let option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013', '2014', '2015', '2016']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
          },
          {
            name: 'Steppe',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
          },
          {
            name: 'Desert',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190]
          },
          {
            name: 'Wetland',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [98, 77, 101, 99, 40]
          }
        ]
      };
      let option3  = {
        angleAxis: {},
        radiusAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu'],
          z: 10
        },
        polar: {},
        series: [
          {
            type: 'bar',
            data: [1, 2, 3, 4],
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [2, 4, 6, 8],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [1, 2, 3, 4],
            coordinateSystem: 'polar',
            name: 'C',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }
        ],
        legend: {
          show: true,
          data: ['A', 'B', 'C']
        }
      };

      this.chart1 = echarts.init(document.querySelector('.chart1'));
      this.chart2 = echarts.init(document.querySelector('.chart2'));
      this.chart3 = echarts.init(document.querySelector('.chart3'));
      this.chart1.setOption(option1); // getOptions() 调试用的
      this.chart2.setOption(option2); 
      this.chart3.setOption(option3); 
    },

import echarts from 'echarts'
this.chart1 = echarts.init( document.querySelector('.chart1'));
this.chart2 = echarts.init( document.querySelector('.chart2'));
this.chart3 = echarts.init( document.querySelector('.chart3'));

this.chart1.setOption(option1) // 取出
this.chart2.setOption(option2) // 取出
this.chart3.setOption(option3) // 取出
 

let option2
this.chart2
let app = {}

窗口问题

mounted() {
	this.initCharts();
	this.resizeCallback = this.resize.bind(this);
	window.addEventListener('resize',	this.resizeCallback )
	},
beforeDestroy() { 
	window.removeEventListener('resize',	this.resizeCallback )
}
methods:{
	resize() {
		this.chart1.resize();
		this.chart2.resize();
		this.chart3.resize();

}}

element-ui 避免使用2.15.9的版本

npm un element-ui -S && npm i element-ui@2.15.8

组件 GformCreator.vue

<template>
</template>
<script>
//jsx
export default {
	props: {
		conf:{
			type:Object,
			required:true
}},
render(h) {
	return <h1> 123 </h1>
}}


</script>

将引入的4个组件提取出来，放到main.js里面，
注册组件

Vue.component(GAsideMenu.name,GAsideMenu);

新增加plugins的文件夹
引入的都放到这个里面

// Vue.component(GAsideMenu.name,GAsideMenu);

注册plugins在main.js

import plugins from '@/plugins'
Vue.use(plugins)

function install (Vue) {
		Vue.component(GAsideMenu.name,GAsideMenu);
}

export default {
		install
}

GformCreator组件

<template></template>
<script>
//jsx
export default {
    name:'GformCreator',
    props: {
        conf: {
            type: Object,
            required: true
        }
    },
    render(h) {
        return <h1> 123 </h1>
    }
}


</script>

create.vue

<template>
	<GformCreator/>
</template>

新建文件：createFormConf.js
写数据和验证

export default Object.freeze({
    title: '123',
    items: [
        [{ title: 'input', label: '用户名'，colspan: 24, key: ' username' }],
        [{ title: 'input', label: '密码'，colspan: 24, key: ' password' }],
        [{ title: 'input', label: '确认密码'，colspan: 24, key: ' confirmPwd' } ]],
    rules: {
            username: [{ require: true }],
            password: [{ require: true }]
        }
})

create.vue下：

import createConf from './createFormConf'

export default {
		data() {
				return {
					createConf
}}}

<GFormCreator :conf = "createConf">
</GFormCreator>

GformCreator.vue
解构

methods:{
		renderRows(rows) {
				return <h1> row </h1>
}
}
render(h) {
			const { title,items:formItems } = this.conf;
			return (
				<div class="form-box">
						<h1>{ title }</h1>
						{/*表单*/}
						<el-form label-width = "80px">
						{ this.renderRows(items)}
						</el-form>
						// 按钮
				<div class="btns">
					{this.$slots.default}
				</div>
			</div>
)}}

style样式

.btn {
	text-align:center
}

create.vue下

<GFormCreator ref="createForm" :conf = "createConf">
		<template #default>
			<el-button @click="doCreate" type = "primary ">创建管理员</el-button>
			<el-button @click="doReset"> 重置 </el-button>
			
		</template>
</GFormCreator>


methods : {
	doCreate() {
		this.$refs.createForm.submit((data  => {
				if(data) {
					console.log('验证成功',data)
				} else {
						console.log('验证失败')
				}})},
doReset() {
		this.$refs.createForm.reset();
}}

GFormCreator.vue

submit() {
	return '假数据'
},
reset() {
	console.log('假重置')
}

normalize.css
清除浮动

.clear-fix ::after {
	contemr:'';
	height:0;
	clear:both;
}

GformCreator.vue

renderRows(rows) {
		return rows.map(rowArr => {
				return
				 <el-row>
				{this.renderColums()}
				</el-row>
})}

renderItem() {
	return <el-input> </el-input>
}
renderColums(columns) {
	return columns.map(item => {
			return  
					<el-col  xl={6},lg={6},md={12},sm={24},xs={24}>
						<el-form-item label={item.label}>   {this.renderItem(item)}  </el-form-item>
					</el-col>
})
}

在这里插入图片描述

xl={item.colspan} lg={item.colspan}

在这里插入图片描述

qq_41283785
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue和Vue-Element-Admin（九）：el-table（多列排序），el-form，echarts组件化
叶子叶来
05-01 1069
目录 el-table表组件化 el-form组件化 echarts组件化 component即元素，组件，components中封装通用组件定义props传入数组，在views中父子关系引用，根据需要设置特殊样式。 el-table表组件化 最简单写法： <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column v-for=".
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
仪表盘封装示例
05-26
利用qt实现仪表盘转动的界面，可用于控件的提升
echarts带table表格展示
Z_Gleng的博客
02-20 3729
整体思路就是用graphic这个属性去画线 表格里的值用的定位写的。
elementui的table组件行展开显示该行的信息(echarts图版)
weixin_68067009的博客
09-16 1940
elementui的table组件行展开显示该行的信息（获取数据，用可视化形式显示出来）
echarts 自定义仪表盘设置背景图片
Cookie686的博客
08-02 3614
echarts自定义仪表盘设置背景图片。
vue.js如何将echarts封装为组件一键使用详解
10-19
Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件，下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装为组件一键使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友...
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁.zip
06-15
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁 组件介绍： <charts/> 基础组件，主要用于生成布局和图表。 <charts-legend/> 图例组件，主要用于生成图表的图例， 配置项 。 <charts-series/> ...
仪表显示.rar_vc 仪表_仪器_仪表显示vc_仪表盘_漂亮 界面
07-14
标题中的“仪表显示.rar_vc 仪表_仪器_仪表显示vc_仪表盘_漂亮 界面”揭示了这个压缩包内容是关于使用Visual C++（简称VC）开发的一个仪表显示程序，该程序着重于图形用户界面（GUI）的设计，旨在创建一个美观的仪表...
swift-环形虚线颜色渐变进度条
08-15
一款环形渐变色虚线进度条，利用draw rect实时绘制，环形颜色渐变。
echarts自定义仪表盘样式
weixin_43773218的博客
07-25 3260
注意echartsecharts的背景图片必须是一个dom节点，而不是图片的url。根据大哥的做法，先将图表轴线、label、分割线、隐藏，只保留刻度。然后将axisLine设置showfalse，还要设置opacity才能彻底隐藏底色。这中样式的仪表盘确实难找，找的我脑瓜子嗡嗡响，找了很久很久很久之后，终于让我找到一个差不多的样式。这位大哥写的样式是这样的，感觉稍微改造改造就差不多是我要的效果了，开干！可以根据自己的需求找ui帮忙做图。这次为难我胖虎的是这样子的仪表盘。......
【数据可视化】Echarts官方文档及常用组件
最新发布
zxctsclrjjjcph的博客
03-18 3534
【数据可视化】Echarts最常用图表，但是没有介绍在遇到问题时如何寻求帮助，也没有详细介绍图表中组件的使用。这次来介绍ECharts中官方文档、常用组件的使用方法，可以更加快捷地创建清晰明了、实用的图表。以下代码均在VScode中使用。对于ECharts官方文档，不要期望一天就能够看完整个文档，并理解文档的所有内容，而应该将文档看成一部参考手册，在使用ECharts绘制图表时，应该知道如何随时快速地查询。对于ECharts这么庞大的文档，没有必要记忆，也不太可能记忆全部配置项的内容。
Element-UI 前端UI 组件库
yk_ddm的博客
03-19 3140
Element-UI 前端UI 组件库 Element-UI 前端UI 组件库
[开源]基于Vue+ElementUI+G2Plot+Echarts的仪表盘设计器
欧菲丽的博客
10-15 1591
基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的仪表盘设计器，具备仪表盘目录管理、仪表盘设计、仪表盘预览能力，支持MySQL、Oracle、PostgreSQL、MSSQL、JSON等数据集接入，对于复杂数据处理还可以使用Groovy脚本数据集，使用简单，完全免费，代码开源。基于Vue+ElementUI+G2Plot+Echarts的仪表盘设计器，使用简单，完全免费，代码开源。使用Apache-2.0开源协议。
Element-ui实现圆盘形的进度盘
向梦想前进
08-19 549
设置witdh为 storke-width的一半即可。
ECharts仪表盘(详细示例——附有具体注释)
热门推荐
GRAY_KEY的博客
09-09 4万+
单仪表盘图表效果如下: 具体代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;单仪表盘案例&lt;/title&gt; &lt;!-- 引入 ECharts 文件 --&gt; &lt;script s
ECharts基础知识详细介绍
Argonaut_的博客
02-28 6761
在 ECharts 中的组件很多，例如在后续内容中我们可能遇到，xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等。系列（series）是很常见的名词。
el-table使用插槽 Echarts图表渲染问题
luohang_1的博客
03-02 615
解决el-table插槽 影响echarts显示问题
vue2echarts组件封装
08-25
Vue2Echarts是一个用于在Vue.js中封装和使用ECharts图表库的组件。下面是一个简单的示例： 首先，你需要安装Vue2Echarts库： ```bash npm install vue-echarts echarts --save ``` 接下来，在你的Vue组件中引入所...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值