初试vue写echarts可视化布局

  • 项目初始化
  • 创建全局样式表并导入iconfont字体文件
  • 全局挂载echarts对象
  • 初始化ScreenPage主体视图页面和各个组件
  • 配置路由
  • 主屏幕的布局分析
  • 期望最终效果图
  • 修改全局样式global.less
  • 页面布局分析
  • @jiaminghi/data-view大屏数据可视化开源组件的使用
  • 安装并引入
  • 边框组件的使用
  • 效果图
  • 如何使用
  • echarts组件
  • template代码
  • 生成echarts图表
  • 为了更方便操作echarts，将echarts的option配置进行拆分


项目初始化

创建全局样式表并导入iconfont字体文件

在src下面的assets里新建css文件夹，创建global.less全局样式文件，然后在main.js中引入。
在src下面的assets里新建font文件夹用于存放iconfont字体库文件，一样在main.js中引入。

// 引入字体文件
import './assets/font/iconfont.css'
// 引入全局css
import './assets/css/global.less'

全局挂载echarts对象

在main.js中

// 将全局的echarts对象挂载到vue的原型对象上
Vue.prototype.$echarts = window.echarts

初始化ScreenPage主体视图页面和各个组件

配置路由

在router/index.js中

import ScreenPage from '@/views/ScreenPage.vue'
const routes = [
  { path: '/', redirect: '/screen' },
  { path: '/screen', component: ScreenPage },
]

主屏幕的布局分析

期望最终效果图

vue 数据可视化项目布局 vue实现可视化布局_css

修改全局样式global.less

html,body,#app{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

页面布局分析

从原型图可以看出页面主要分头部标题screen-header区域以及存放各个图表的内容screen-body区域,而图表内容区域又分成了左screen-left,中screen-middle,右screen-right三个中等区域，每个中等区域又另分上下俩块小区域。
于是便确定了ScreenPage主体视图页面的整体布局以及各个图表组件所要摆放的区域。

@jiaminghi/data-view大屏数据可视化开源组件的使用

DataV组件库是基于Vue编写的，主要用于构建大屏数据展示页面的开发组件
官方文档

安装并引入

npm install @jiaminghi/data-view

在main.js中

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view';
// 全局注册
Vue.use(dataV);

边框组件的使用

效果图

vue 数据可视化项目布局 vue实现可视化布局_vue 数据可视化项目布局_02

如何使用

以最右侧的screen-right为例

<section class="screen-right">
        <div id="right-top">
        </div>
        <div id="right-bottom">
        </div>
</section>

css样式为

.screen-right {
    height: 100%;
    width: 20%;
    #right-top {
      height: 45%;
      position: relative;
    }
    #right-bottom {
      height: 45%;
      position: relative;
      margin-top: 10px;
    }
  }

如果在父组件里面，俩个小容器外面设置边框组件，如下图可以看出边框组件是以父组件screen-right的宽高来渲染的

<section class="screen-right">
 <dv-border-box-13>
        <div id="right-top">
        </div>
        <div id="right-bottom">
        </div>
 </dv-border-box-13>
</section>

vue 数据可视化项目布局 vue实现可视化布局_echarts_03


接下来把边框组件分别放置到俩个小容器里边，效果如下图，因此可知道边框组件是相对于其父元素来进行边框的美化渲染

<section class="screen-right">
        <div id="right-top">
         	<dv-border-box-13>
         	</dv-border-box-13>
        </div>
        <div id="right-bottom">
         	<dv-border-box-13>
         	</dv-border-box-13>
        </div>
</section>

vue 数据可视化项目布局 vue实现可视化布局_vue.js_04


因此，待会的各个echarts图表组件直接放置于dataV边框组件内部即可。

echarts组件

template代码

<template>
	// 外部容器
  <div class="com-container">
 	 // 存放图表的容器
    <div class="com-chart" ref="devLineRef"></div>
  </div>
</template>

在global.less中增加

.com-container{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

生成echarts图表

包括初始化图表initChart()，获取数据getData(),更新图表updateChart()和屏幕大小适配screenAdapter()四个方法

为了更方便操作echarts，将echarts的option配置进行拆分

涉及到数据的option配置放到updateChart()中进行配置，涉及到屏幕适配的例如标题字体的大小放到screenAdapter()中进行配置，其余配置就正常初始化的时候进行配置。

vue 数据可视化项目布局 vue实现可视化布局_css_05