详解Vue2 + Echarts实现多种图表数据可视化仪表板(附源码) - 行业资讯

<强>数据可视化
　　

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

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

<>强技术栈

　　<李> vue2.x李　　<李> vuex存储公共变量,如色值等李　　<李> vue-router路由李　　<李> element-ui饿了么基于vue2开发组件库,本例使用了其中的datePicker李　　<李> echarts一款丰富的图表库李　　<李> webpack ES6,巴别塔,笔… 　　　　

<强>项目截图

<强>开发
　　

<强>组件化
　　

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

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

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

<>强柱状图
　　

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

　　　　　　& lt; template> 　　& lt; div类=癿ultipleColumn”比; 　　& lt; v-header: name="名称":legendArr=發egendArr”: myChart=癿yChart祝辞& lt;/v-header> 　　& lt; v-filter: myChart=" myChart " v=癿yChart._dom祝辞& lt;/v-filter> 　　& lt; div类="主"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　　　

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

<强> v-header
　　

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

　　<李>名称图表的标题　　<李> legendArr图表所包含的多种类型李　　<李> myChart当前图表对象李　　　　

<强> v-filter
　　

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

　　<李> myChart当前图表对象李　　　　

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

　　主要

<强>
　　

图表的主体文件

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

<强>初始化
　　

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

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

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

　　　　　　美元。nextTick(()=比;{ 　　this._init () 　　}) 　　　　

<强>仪表板
　　

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

html
　　

　　　　　　& lt;模板lang=癶tml”比; 　　& lt; div类=耙潜砼獭北? 　　& lt; div类=癴lex-container柱”比; 　　& lt; div class="项比; 　　& lt; multipleColumn> & lt;/multipleColumn> 　　& lt;/div> 　　& lt; div类=傲较睢盄click=癱lickChart (2)”比; 　　& lt; column> & lt;/column> 　　& lt;/div> 　　& lt; div class="项三个“@click=癱lickChart (3)”比; 　　& lt; v-line> & lt;/v-line> 　　& lt;/div> 　　& lt; div类=八南罨疃盄click=癱lickChart (4)”比; 　　& lt; point> & lt;/point> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　之前　　　　

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

<强>整体的思想为:

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

<>强性能