详解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 相关文章推荐
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 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
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
JavaScript 数组详解
2013/10/10 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
js中this对象用法分析
2018/01/05 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
Python去除列表中重复元素的方法
2015/03/20 Python
Python中安装easy_install的方法
2018/11/18 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Python随机数函数代码实例解析
2020/02/09 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
怎么写好自荐信
2013/10/30 职场文书
超市店庆活动方案
2014/08/31 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
护士实习自荐信
2015/03/06 职场文书
交通事故调解协议书
2015/05/20 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
研讨会致辞
2015/07/31 职场文书