相关知识1. DataV介绍DataV组件库基于Vue （React版 (opens new window)），主要用于构建大屏数据展示页面即数据可视化。1.1 DataV组件DataV具有多种类型组件可供使用：边框带有不同边框的容器装饰用来点缀页面效果，增加视觉效果图表图表组件基于Charts (opens new window)封装，轻量，易用其他飞线图/水位图/轮播表/胶囊柱图/飞线图/锥形图/数字翻牌器/排名轮播表/...1.2 使用前必看兼容性组件库的开发和调试都使用Chrome浏览器。宽度异常组件的默认宽高都是100%，可以根据父容器宽高进行自适应，但在某些情况下组件宽高可能表现异常，这种情况一般是因为组件的父容器宽高发生了变化，而组件没有侦知这一变化，你可以在组件上绑定key值，在更改父容器宽高且页面完成重绘后（使用$nextTick），更新key值，使组件强制刷新，以获取正确宽高。状态更新避免组件更新了数据后，状态却不刷新，也就是没变化，这里组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。具体更新数据示例如下：template div dv-percent-pond :config="config" style="width:200px;height:100px;" / /div/template scriptexport default { name: 'UpdateDemo', data () { return { config: { value: 66, lineDash: [10, 2] } } }, methods: { // 更新数据的示例方法 updateHandler () { const { config } = this /** * 只是这样做是无效 * config指向的内存地址没有发生变化 * 组件无法侦知数据变化 */ this.config.value = 90 this.config.lineDash = [10, 4] /** * 使用ES6拓展运算符生成新的props对象 * 组件侦知数据变化 自动刷新状态 */ this.config = { ...this.config } } }}/script1.3 创建Vue项目DataV组件库依赖Vue，要想使用它，创建一个Vue项目当然是必须的，如果已有Vue项目或使用UMD版开发可跳过此步骤。（1）安装Vue/Cli命令如下npm i -g @vue/cli（2）创建Vue项目创建项目名称datav-project，命令如下：vue create datav-project（3）安装DataV安装DataV前需进入到datav-project的根目录下，命令如下：cd datav-project在项目目录下进行组件库安装，命令如下：npm i @jiaminghi/data-view（4）使用DataV在vue项目中注册dataV插件,main.js文件中添加如下代码://将自动注册所有组件为全局组件 import dataV from '@jiaminghi/data-view' Vue.use(dataV)2. 全屏容器数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。设置如下：dv-full-screen-containercontent/dv-full-screen-container建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。同时，使用前请注意将body的margin设为0，否则会引起计算误差，导致全屏后不能完全充满屏幕。3. Loading加载数据尚未加载完成时，可以显示Loading效果，用以增强用户体验。Loading效果如下：配置代码如下：dv-loadingLoading.../dv-loading4. 边框边框均由SVG元素绘制，体积轻量不失真，它们的使用极为方便。（1）边框布局边框组件默认宽高均为100%，边框内部的节点将被slot插槽分发至边框组件下class为border-box-content的容器内，如有布局需要，请针对该容器布局，以免产生样式冲突，导致边框显示异常。（2）注意事项建议把边框内的节点封装成组件，以组件的形式置入边框。这是因为slot的渲染机制较为特殊，如果你要在组件mounted后对边框内置入的节点进行页面渲染状态敏感的操作（获取DOM宽高，实例化echarts图表等），可能会发生非预期的结果。比如获取的DOM宽高为0，封装成组件后可避免这种情况。（3）重置高度如果边框组件的父容器宽高发生了变化，而边框组件没有侦知这一变化，边框就无法自适应父容器宽高。针对这种情况，你可以给边框绑定key值，在父容器宽高发生变化且完成渲染后更改key值，强制销毁边框组件实例并重新渲染，重新获取宽高。但这会造成边框内的组件同样被销毁重新渲染，这会带来额外的性能消耗，并导致组件状态丢失，此时我们可以调用组件内置的initWH方法去重置边框组件的宽高以避免销毁实例重新渲染带来的非预期副作用。（4）自定义颜色所有边框均支持自定义颜色及背景色，方法如下：dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" dv-border-box-1/dv-border-box-1边框颜色属性属性说明类型可选值默认值color自定义颜色string[]--backgroundColor背景色string--TIP:1.color属性支持配置两个颜色，一主一副。2.颜色类型可以为颜色关键字、十六进制色、RGB及RGBA。（5）边框样式DataV中边框共计有13种样式，代码实现非常简单，只需要修改后边的数字即可修改不同的样式,如设置dv-border-box-1样式，代码如下：dv-border-box-1dv-border-box-1/dv-border-box-1展示效果如下：样式2代码如下：dv-border-box-2dv-border-box-2/dv-border-box-2展示效果如下：样式3代码如下：dv-border-box-3dv-border-box-3/dv-border-box-3展示效果如下：5. 图表图表组件基于Charts (opens new window)封装，只需要将对应图表option数据传入组件即可。如实现剩余油量效果图表，代码如下：dv-charts :option="option" /导入数据代码如下：export default { title: { text: '剩余油量表', style: { fill: '#fff' } }, series: [ { type: 'gauge', data: [ { name: 'itemA', value: 55 } ], center: ['50%', '55%'], axisLabel: { formatter: '{value}%', style: { fill: '#fff' } }, axisTick: { style: { stroke: '#fff' } }, animationCurve: 'easeInOutBack' } ] }最后的展示效果如下：6. 动态环图代码实现：dv-active-ring-chart :config="config" style="width:200px;height:200px" /数据部分：export default { data: [ { name: '周口', value: 55 }, { name: '南阳', value: 120 }, { name: '西峡', value: 78 }, { name: '驻马店', value: 66 }, { name: '新乡', value: 80 } ]}展示效果如下：7. 胶囊图代码如下：dv-capsule-chart :config="config" style="width:300px;height:200px" /数据部分：export default { data: [ { name: '南阳', value: 167 }, { name: '周口', value: 67 }, { name: '漯河', value: 123 }, { name: '郑州', value: 55 }, { name: '西峡', value: 98 } ] }展示效果如下：代码属性说明：（1）data属性说明属性说明类型可选值默认值name环对应名称String------value环对应值Number------（2）config属性说明属性说明类型可选值默认值data柱数据ArrayObjectdata属性[]unit单位String---''colors环颜色ArrayString[1][2]showValue显示数值Boolean---falseconfig注释：颜色支持hex|rgb|rgba|颜色关键字等四种类型。默认配色为['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']。8. 水位图代码如下：dv-water-level-pond :config="config" style="width:150px;height:200px" /数据部分：export default { data: [66, 45], shape: 'roundRect' }展示效果如下：（1）config属性说明属性说明类型可选值默认值data水位位置[1]ArryaNumber---[]shape
大屏数据可视化——DataV平台下的零售数据驾驶舱大屏数据可视化
相关知识1. DataV介绍DataV组件库基于Vue （React版 (opens new window)），主要用于构建大屏数据展示页面即数据可视化。1.1 DataV组件DataV具有多种类型组件可供使用：边框带有不同边框的容器装饰用来点缀页面效果，增加视觉效果图表图表组件基于Charts (opens new window)封装，轻量，易用其他飞线图/水位图/轮播表/胶囊柱图/飞线图/锥形图/数字翻牌器/排名轮播表/...1.2 使用前必看兼容性组件库的开发和调试都使用Chrome浏览器。宽度异常组件的默认宽高都是100%，可以根据父容器宽高进行自适应，但在某些情况下组件宽高可能表现异常，这种情况一般是因为组件的父容器宽高发生了变化，而组件没有侦知这一变化，你可以在组件上绑定key值，在更改父容器宽高且页面完成重绘后（使用$nextTick），更新key值，使组件强制刷新，以获取正确宽高。状态更新避免组件更新了数据后，状态却不刷新，也就是没变化，这里组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。具体更新数据示例如下：template div dv-percent-pond :config="config" style="width:200px;height:100px;" / /div/template scriptexport default { name: 'UpdateDemo', data () { return { config: { value: 66, lineDash: [10, 2] } } }, methods: { // 更新数据的示例方法 updateHandler () { const { config } = this /** * 只是这样做是无效 * config指向的内存地址没有发生变化 * 组件无法侦知数据变化 */ this.config.value = 90 this.config.lineDash = [10, 4] /** * 使用ES6拓展运算符生成新的props对象 * 组件侦知数据变化 自动刷新状态 */ this.config = { ...this.config } } }}/script1.3 创建Vue项目DataV组件库依赖Vue，要想使用它，创建一个Vue项目当然是必须的，如果已有Vue项目或使用UMD版开发可跳过此步骤。（1）安装Vue/Cli命令如下npm i -g @vue/cli（2）创建Vue项目创建项目名称datav-project，命令如下：vue create datav-project（3）安装DataV安装DataV前需进入到datav-project的根目录下，命令如下：cd datav-project在项目目录下进行组件库安装，命令如下：npm i @jiaminghi/data-view（4）使用DataV在vue项目中注册dataV插件,main.js文件中添加如下代码://将自动注册所有组件为全局组件 import dataV from '@jiaminghi/data-view' Vue.use(dataV)2. 全屏容器数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。设置如下：dv-full-screen-containercontent/dv-full-screen-container建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。同时，使用前请注意将body的margin设为0，否则会引起计算误差，导致全屏后不能完全充满屏幕。3. Loading加载数据尚未加载完成时，可以显示Loading效果，用以增强用户体验。Loading效果如下：配置代码如下：dv-loadingLoading.../dv-loading4. 边框边框均由SVG元素绘制，体积轻量不失真，它们的使用极为方便。（1）边框布局边框组件默认宽高均为100%，边框内部的节点将被slot插槽分发至边框组件下class为border-box-content的容器内，如有布局需要，请针对该容器布局，以免产生样式冲突，导致边框显示异常。（2）注意事项建议把边框内的节点封装成组件，以组件的形式置入边框。这是因为slot的渲染机制较为特殊，如果你要在组件mounted后对边框内置入的节点进行页面渲染状态敏感的操作（获取DOM宽高，实例化echarts图表等），可能会发生非预期的结果。比如获取的DOM宽高为0，封装成组件后可避免这种情况。（3）重置高度如果边框组件的父容器宽高发生了变化，而边框组件没有侦知这一变化，边框就无法自适应父容器宽高。针对这种情况，你可以给边框绑定key值，在父容器宽高发生变化且完成渲染后更改key值，强制销毁边框组件实例并重新渲染，重新获取宽高。但这会造成边框内的组件同样被销毁重新渲染，这会带来额外的性能消耗，并导致组件状态丢失，此时我们可以调用组件内置的initWH方法去重置边框组件的宽高以避免销毁实例重新渲染带来的非预期副作用。（4）自定义颜色所有边框均支持自定义颜色及背景色，方法如下：dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" dv-border-box-1/dv-border-box-1边框颜色属性属性说明类型可选值默认值color自定义颜色string[]--backgroundColor背景色string--TIP:1.color属性支持配置两个颜色，一主一副。2.颜色类型可以为颜色关键字、十六进制色、RGB及RGBA。（5）边框样式DataV中边框共计有13种样式，代码实现非常简单，只需要修改后边的数字即可修改不同的样式,如设置dv-border-box-1样式，代码如下：dv-border-box-1dv-border-box-1/dv-border-box-1展示效果如下：样式2代码如下：dv-border-box-2dv-border-box-2/dv-border-box-2展示效果如下：样式3代码如下：dv-border-box-3dv-border-box-3/dv-border-box-3展示效果如下：5. 图表图表组件基于Charts (opens new window)封装，只需要将对应图表option数据传入组件即可。如实现剩余油量效果图表，代码如下：dv-charts :option="option" /导入数据代码如下：export default { title: { text: '剩余油量表', style: { fill: '#fff' } }, series: [ { type: 'gauge', data: [ { name: 'itemA', value: 55 } ], center: ['50%', '55%'], axisLabel: { formatter: '{value}%', style: { fill: '#fff' } }, axisTick: { style: { stroke: '#fff' } }, animationCurve: 'easeInOutBack' } ] }最后的展示效果如下：6. 动态环图代码实现：dv-active-ring-chart :config="config" style="width:200px;height:200px" /数据部分：export default { data: [ { name: '周口', value: 55 }, { name: '南阳', value: 120 }, { name: '西峡', value: 78 }, { name: '驻马店', value: 66 }, { name: '新乡', value: 80 } ]}展示效果如下：7. 胶囊图代码如下：dv-capsule-chart :config="config" style="width:300px;height:200px" /数据部分：export default { data: [ { name: '南阳', value: 167 }, { name: '周口', value: 67 }, { name: '漯河', value: 123 }, { name: '郑州', value: 55 }, { name: '西峡', value: 98 } ] }展示效果如下：代码属性说明：（1）data属性说明属性说明类型可选值默认值name环对应名称String------value环对应值Number------（2）config属性说明属性说明类型可选值默认值data柱数据ArrayObjectdata属性[]unit单位String---''colors环颜色ArrayString[1][2]showValue显示数值Boolean---falseconfig注释：颜色支持hex|rgb|rgba|颜色关键字等四种类型。默认配色为['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']。8. 水位图代码如下：dv-water-level-pond :config="config" style="width:150px;height:200px" /数据部分：export default { data: [66, 45], shape: 'roundRect' }展示效果如下：（1）config属性说明属性说明类型可选值默认值data水位位置[1]ArryaNumber---[]shape
