详解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 页面载入进度条实现代码
Feb 08 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
Angular的$http与$location
Dec 26 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 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
php把大写命名转换成下划线分割命名
2015/04/27 PHP
php无限极分类实现方法分析
2019/07/04 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python对列表排序的方法实例分析
2015/05/16 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python制作Windows系统服务
2017/03/25 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
django最快程序开发流程详解
2019/07/19 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
python实现超级玛丽游戏
2020/03/18 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
招商引资工作汇报
2014/10/28 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书