精华内容
下载资源
问答
  • vue-big-screen 基于 vue+datav+echart 框架构建的可视化数据大屏项目,star高达1.1K+。提供数据动态渲染、屏幕自适应、内部图表自由替换等功能。目录结构安装使用# 下载项目git clone ...

    今天给大家分享一款高质量的Vue动态可视化大屏模板VueBigScreen。

    27b57e6788f5910d7a8bbcb090cc937f.png

    vue-big-screen 基于 vue+datav+echart 框架构建的可视化数据大屏项目,star高达1.1K+。提供数据动态渲染、屏幕自适应、内部图表自由替换等功能。

    9e4689ad86bbd6c73f89482bd96ae17f.gif

    目录结构

    ff91a4b902589f4fdd4963eb396e52c6.png

    安装使用

    # 下载项目git clone https://gitee.com/MTrun/big-screen-vue-datav.git# 进入目录cd big-screen-vue-datav# 安装依赖包npm install# 启动工程项目npm run serve

    更换边框

    边框是使用了 DataV 自带的组件,只需要去 views 目录下去寻找对应的位置去查找并替换就可以,具体的种类请去 DavaV 官网查看。

    更换图表

    直接进入 components/echart 下的文件修改成你要的 echarts 模样,可以去echarts 官方社区里面查看案例。

    https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

    屏幕适配配置

    本项目借助了 flexible 插件,通过改变 rem 的值来进行适配,原设计为 1920px。 ,适配区间为:1366px ~ 2560px,本项目有根据实际情况进行源文件的更改,小屏幕(如:宽为 1366px)。

    // flexible文件位置: `common/flexible.js`,修改部分如下function refreshRem() {  var width = docEl.getBoundingClientRect().width;  // 最小1366px,最大适配2560px  if (width / dpr < 1366) {    width = 1366 * dpr;  } else if (width / dpr > 2560) {    width = 2560 * dpr;  }  // 原项目是1920px我设置成24等份,这样1rem就是80px  var rem = width / 24;  docEl.style.fontSize = rem + 'px';  flexible.rem = win.rem = rem;}
    c503d968b7dc3c09ce44cd87bbb273ff.png
    445dd6d026bd8113d5ba1724202d6b8d.png

    以上就是对这个Vue大屏项目的简单介绍,如果你想看到更详细的文档,那就点击下面的链接去看看吧!

    # datav官方文档http://datav.jiaminghi.com/# echarts实例https://echarts.apache.org/examples/zh/index.html# gitee地址https://gitee.com/MTrun/big-screen-vue-datav

    ok,就分享到这里。希望对大家有所帮助,喜欢的话可以去看下哈~

    展开全文
  • 企业信息化系统的建设过程中,除了实现企业业务数字化之外,还需要对数据可视化做一些应用,Workfine平台完全集成了echart图表功能,可以将数据业务数据转化成可视化的动态图表。此篇文章介绍如何通过Workfine平台...

    e0d11b4213eaf762493a2a7dcda6f4b2.png

    企业信息化系统的建设过程中,除了实现企业业务数字化之外,还需要对数据可视化做一些应用,Workfine平台完全集成了echart图表功能,可以将数据业务数据转化成可视化的动态图表。此篇文章介绍如何通过Workfine平台设置可视化的动态图表。

    步骤

    进入图表管理,点击“+”按钮,弹出图表新建提示框,输入图表名称后点击新建按钮。

    dcdbf5a2e88dfa42ec8c36e8723fdd40.png

    点击新建之后会在基本信息名称文本框中显示,点击图表后面的”+”选择图表类型,可以选择直角坐标系、极坐标系、饼图、漏斗、仪表盘,也可以选择多个图表,实现一个图表项多个图表的组合。给每个图表添加图表系列,其中直角坐标系与极坐标系可以选择柱形、折线、散点等系列的组合,饼图、漏斗、仪表盘为默认系列。

    f1bf76bdfafe6f77c689de75c585d2f4.png

    点击”数据源”右侧的编辑按钮,弹出数据源选择框,点击”添加数据源”按钮,选择所需要的数据表,如果是多数据表,则需要进行表关联

    51e3014b3a10cf8bc26f194b139fc160.png

    点击”筛选条件”,左侧列中选择要筛选的字段,右侧条件框编辑筛选条件,所有操作都是点选式,不需要编辑代码。

    d24cde4ed8d09136b0c3949f5be4b6ff.png

    数据筛选完成后,进入数据填充,系统会自动将所选择系列需要填充的字段整理好,只需要将左侧树对应的字段填充到需要对应的字段上去即可。

    72716f3171b35f466153e2ec001d0c6b.png

    点击”绑定权限”后面的【编辑】按钮,弹出权限绑定框,点击右上角的“+”号按钮,进入角色选择框,选择对应角色,点击保存,角色绑定完成。

    4283e7e4ddf2a1348015df5afd7924f4.png

    图表项属性:点击左侧图表项(1),图表设计中间区域出展示图表项属性的设置框,包括标题样式、图例、提示框,配色,工具集等的属性设置

    图表属性:点击左侧图表 (2),图表设计中间区域出展示图表属性的设置框,包括图表大小、便宜、字体、分类轴、数据轴等的属性设置。

    图例属性:点击左侧图例(3), 图表设计中间区域出展示图例属性的设置框,包括图表间距、宽度、旋转、展示样式等的属性设置。

    a1584a887110a5d1bc58a2515518486d.png
    Workfine数据管理平台 - 首页www.bossietech.com
    7665b44cc999c46258ed971de971dce5.png
    展开全文
  • vue+echart图表动态自适应实现

    千次阅读 2018-04-08 11:15:50
    一、首先全局定义表格对象:二、绑定和设置:如果直接跟window.onresize = myChart.resize会导致只有一个成功,因为直接调用的话后面的会覆盖。三、监听:

    一、首先全局定义表格对象:

    二、绑定和设置:

    如果直接跟window.onresize = myChart.resize会导致只有一个成功,因为直接调用的话后面的会覆盖。

    三、监听:


    展开全文
  • 奔跑的面条开源许可协议:Apache-2.0项目地址:https://gitee.com/MTrun/big-screen-vue-datav项目简介一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现...

    b16e1241ac85741fadab9b336677107e.png

    项目名称:vue-big-screen

    项目作者:奔跑的面条

    开源许可协议:Apache-2.0

    项目地址:https://gitee.com/MTrun/big-screen-vue-datav

    项目简介

    • 一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改。
    • 项目需要全屏展示(按 F11)。
    • 项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用按需引入。
    • 拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。
    • 项目环境:vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。

    项目展示

    1c71f39b81f6b46c0fda743f7111589d.png

    主要文件介绍

    3f9259389e2205b6f6ba5ccf17553464.png

    使用介绍

    1.如何启动项目

    需要提前安装好nodejs与npm,下载项目后在项目主目录下运行npm/cnpm install拉取依赖包,然后使用 vue-cli 或者直接使用命令npm run serve,就可以启动项目,启动项目后需要手动全屏(按 F11)。

    2.如何请求数据

    现在的项目未使用前后端数据请求,建议使用 axios 进行数据请求,在 main.js 位置进行全局配置,在 views/xx.vue 文件里进行前后端数据请求。

    • axios 的 main.js 配置参考范例(因人而异)
    import axios from "axios";
    
    
    //把方法放到vue的原型上,这样就可以全局使用了
    Vue.prototype.$http = axios.create({
      //设置20秒超时时间
      timeout: 20000,
      baseURL: "http://172.0.0.1:80080", //这里写后端地址
    });
    
    • 在 vue 页面中调用 axios 方法并通过 props 传给 echarts 图表子组件
    export default {
      data() {
      	ListDataSelf:[]
      },
      mounted() {
       this.fetchList(); //获取数据
      },
      methods: {
    	async fetchList(){
    	  const { code,listData }= await this.$http.get("xx/xx/xx"x);
    	  if(code === 200){
    		 this.ListDataSelf= listData;
    	  }
    	}
      }
     }
    

    3.如何动态渲染图表

    在components/echart下的文件,比如drawPie()是渲染函数,echartData是需要动态渲染的数据,当外界通过props传入新数据,我们可以使用watch()方法去监听,一但数据变化就调用this.drawPie()并触发内部的.setOption函数,重新渲染一次图表。

    //这里是子组件内部
    
    
    props: ["listData"],
    watch: {
      listData(newValue) {
         this.echartData= newValue;
         this.drawPie();
       },
      },
    methods: {
      drawPie() {
      	.....
      	'渲染节点名称'.setOption(option);
      }
     }
    

    以上就是对这个 Vue 大屏项目的简单介绍,如果你想看到更详细的文档,那就点击后面的链接前往项目主页看看吧:https://gitee.com/MTrun/big-screen-vue-datav

    展开全文
  • 一、项目描述 一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改,详情请点击下方 DataV 文档。 项目...
  • 图表比较多,但其实用到的就是 饼图、柱状图和折线图,如果完整引入,会多很多不必要的插件和增大包的体积,最近一直在上性能优化的课,明白 完整引入和按需引入的差别,所以认真去了解了Echart如何按需引入,在此...
  • // 图表动态改变 setInterval(function() { var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/g, ''); var data0 = that.option.series[0].data; data0.shift(); // 两秒请求一次数据 that....
  • let brokenLineEchart= this.$echarts.init(document.getElementById("scatterEchart")); brokenLineEchart.setOption({ backgroundColor: '#ffffff', grid: { //Echarts组件 离容器的距离 left: '5%', ...
  • Vue中使用Echart

    2020-09-23 21:15:47
    Vue中使用Echart 1. 安装echarts依赖 npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在需要图表的地方设置宽、高 <div ref="chart" ...
  • 一、项目描述一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 ",通过 Vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改,详情请点击下方 DataV 文档。项目需要...
  • 如图:在动态加载图表的情况下,自定义一个全屏按钮,点击按钮全屏显示图表。 实现效果 实现思路: 遮罩:定义两个div:a和A,a为当前图表,A为全屏后的图表,全屏后A在a的上层显示,退出全屏后A隐藏 实现过程 ...
  • Echart实现动态线性图

    2020-10-20 14:16:58
    2:取消选择数据,对应的数据从图表上消失。 代码实现(Vue) <template> <div style="margin-top :10px;"> <el-row :gutter="20" style="vertical-align:middle;" > <el-col :span="4"&...
  • vue+echart踩坑记

    2019-08-01 16:24:32
    需求描述:页面中按钮控制上传文件后显示数据,图表显示 功能点描述:控制显示隐藏(没上传文件前不显示图表),获取数据渲染图表 ...第二个问题 动态控制容器的大小即可解决 第三个问题 //图表配置setoption之后...
  • vue循环绘制echart饼图

    2020-04-16 20:30:27
    1、echarts.js ...-- 每一个图表都有自己唯一的id,所有需要动态传入。 --> <div :id="id" :style="style"/> </template> <script> import echarts from 'echarts' // 引入 e...
  • vue-big-screen 基于 vue+datav+echart 框架构建的可视化数据大屏项目,star高达1.1K+。提供数据动态渲染、屏幕自适应、内部图表自由替换等功能。目录结构安装使用# 下载项目git clone ...
  • 本项目基于vue-admin-template做二次开发,参照开源作者花裤衩的建议,首先,从迁移vue-admin-admin上组件做集成开始,实践echart动态加载数据,以及界面布局、背景图等修改,并总结了迁移组件过程中遇到的问题。
  • vue echarts 动态数据

    2018-10-18 10:13:00
    安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org... ...cnpm install echarts -S ...创建图表 ...// 引入echarts import echart...
  • echart使用小结

    2018-09-14 17:43:06
    写在前面。定义的接收图表 的容器哦必须设置宽高。 不然可能找不到就报错:Cannot read property 'getAttribute' of null 如果在vue项目里面,写了宽高还报这个错就可能是页面的容器还没有...Vue.prototype.$echart...
  • vue大数据可视化(大屏展示)解决方案

    万次阅读 多人点赞 2020-04-21 14:09:10
    通过 vue 组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用 DataV 自带组件,可自由进行更改,持续更新… 项目地址: vue-big-screen(码云) 一、项目描述 一个基于 vue、datav、Echart 框架的 " ...
  • 系列教程《一步步带你做vue后台管理框架》第一课线上...多TAB导航(应广大朋友们的业务需求)登录/注销权限验证Tinymce 编辑器Markdown 编辑器动态侧边栏(支持多级路由)面包屑导航JSON展示组件echartjs图表404错误页...
  • 提供数据动态渲染、屏幕自适应、内部图表自由替换等功能。目录结构安装使用#下载项目git clone https://gitee.com/MTrun/big-screen-vue-datav.git# 进入目录cd big-screen-vue-datav# 安装依赖包npm ...
  • 介绍一个基于 vueEchart 框架的大数据可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能。开源地址https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search...
  • 奔跑的面条开源许可协议:Apache-2.0项目地址:https://gitee.com/MTrun/big-screen-vue-datav项目简介一个基于 vue、datav、Echart 框架的 "数据大屏项目",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由...
  • 一、项目描述一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改,详情请点击下方 DataV 文档。项目需要...

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

echart动态图表vue

vue 订阅