详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)


Posted in Javascript onMarch 21, 2017

数据可视化

将数据通过图表的形式展现出来将大大的提升可读性和阅读效率

本例包含柱状图、折线图、散点图、热力图、复杂柱状图、预览面板等

技术栈

  1. vue2.x
  2. vuex 存储公共变量,如色值等
  3. vue-router 路由
  4. element-ui 饿了么基于vue2开发组件库,本例使用了其中的datePicker
  5. echarts 一款丰富的图表库
  6. webpack、ES6、Babel、Stylus...

项目截图

详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)

开发

组件化

本项目完全采用组件化的思想进行开发。使用vue-router作为路由,每个页面都是一个组件,每个组件里又包含多个组件。可以看到,多种图表的标题和日期筛选等都是类似的格式,所以这两个都分别做成了组件。

除此之外,在筛选产品的时候用到的checkbox也被我写成了组件,有需要的朋友也可以剥离出去单独使用(不过写的比较粗糙)

每个图表都是一个单独的组件,也可以单独的剥离出去使用。

柱状图

本项目包含多种图表,这里挑“柱状图”说一说,其他的图标实现方式类似。

<template>
<div class="multipleColumn">
 <v-header :name="name" :legendArr="legendArr" :myChart="myChart"></v-header>
 <v-filter :myChart="myChart" v-if="myChart._dom"></v-filter>
 <div class="main"></div>
</div>
</template>

页面HTML可以看到,一个完整的图标是由三个部分组成:

v-header

头组件,存放标题以及不同类型的筛选等

  1. name 图表的标题
  2. legendArr 图表所包含的多种类型
  3. myChart 当前图表对象

v-filter

筛选组件,日期的筛选以及不同产品的筛选

  1. myChart 当前图表对象

v-if="myChart._dom"表示在当前图表dom元素渲染完成之后再渲染filter组件

main

图表的主体文件

需要注意的是:main必须要指定宽高,否则echarts无法渲染dom

初始化

初始化需要在vue的mounted()方法里执行,因为这里能保证当前的页面元素都已经被加载完成。

mounted() {
 // 基于准备好的dom,初始化echarts实例
 this.myChart = echarts.init(document.querySelector('.multipleColumn .main'))
 this.myChart.setOption(this.options) //this.options为echarts的配置,详情可去我的gitHub查看
}

如果要在created()方法里执行,则需要另外加上

this.$nextTick(() => {
 this._init()
})

DashBoard

dashboard是一个所有图表的预览,并且有一个点击切换的动画效果,这里大概讲解一个实现方式。

html

<template lang="html">
 <div class="dashboard">
  <div class="flex-container column">
    <div class="item one" @click="clickChart('1')" style="transform: translate(-22.4%,-33.5%) scale(0.33)">
     <multipleColumn></multipleColumn>
    </div>
    <div class="item two" @click="clickChart('2')" style="transform: translate(-22.4%,0.5%) scale(0.33)">
     <column></column>
    </div>
    <div class="item three" @click="clickChart('3')" style="transform: translate(-22.4%,34.5%) scale(0.33)">
     <v-line></v-line>
    </div>
    <div class="item four active" @click="clickChart('4')" style="transform: translate(43.7%, 0) scale(1)">
     <point></point>
    </div>
  </div>
 </div>
</template>

可以看到,这里是设置了四张图表的Wrapper,每个Wrapper里面装一个图表组件。通过动态的改变style样式来切换。

整体的思想为:

  1. 使用百分比布局,这样才能在不能大小的屏幕做到自适应
  2. 确定图表显示比例,长宽比
  3. 只做一个transform变换,这样才能提高性能

性能

关于性能方面,这里多说一句:

相信大家都看过在线演示的demo了,不同图表间的切换不仅有位置的变换,还有大小的变换。那么大小的变换大家都知道是用transform的scale变换,但是位置的变换呢,使用left、top?

很显然这样是不对的,但是这样确实也能实现效果,但是会非常的消耗性能。一个CSS属性的变化就相当于一个线程,那么如果使用了left、top以及transform的话就是三个线程同时开启,那你的电脑温度将会很快飙升的

正确的解决方案还是继续使用transform,使用它的 translate,如:

transform: translate(-22.4%,0) scale(0.33)

下载地址:DataVisualization_3water.rar

结语

这个项目还是挺实用的一个项目,最大程度的运用了vue的组件化思想。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
js实现盒子拖拽动画效果
Aug 09 Javascript
node安装--linux下的快速安装教程
Mar 21 #Javascript
Vue 单文件中的数据传递示例
Mar 21 #Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 #Javascript
详解Vue 实例中的生命周期钩子
Mar 21 #Javascript
十大热门的JavaScript框架和库
Mar 21 #Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 #Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
Python写的服务监控程序实例
2015/01/31 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
大学生个人求职信范文
2013/09/21 职场文书
食品安全责任书
2014/04/15 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
Nginx配置使用详解
2022/07/07 Servers