前端大屏幕项目(数据可视化)的一点思考
想必近几年前端的数据可视化越来越重要了，很多甲方爸爸都喜欢那种炫酷的大屏幕设计，类似如下这种：
遇到的这样的项目，二话不说，echarts或者antv，再搭配各种mvvm框架（react，vue），找二次封装过的组件，然后开始埋头开始写了，写着写着你会发现，如何适配不同屏幕呢？css媒体查询吧，用vw吧，哪个好点呢。其实写到最后，我觉得都不好
对于这种拿不定主意的情况呢，最好还是参考大厂的做法，于是去找了网易有数，百度suger等，他们是如何写这样的页面的
提供2个他们的案例链接：
百度
网易有数
仔细观察他们都采用了css3的缩放 transform: scale(X) 属性，看到这是不是有种豁然开朗的感觉
于是我们只要监听浏览器的窗口大小，然后控制变化的比例就好了
以React的写法为例
监听window的 resize 事件最好加个节流函数 debounce
然后一个简单的组件就封装好了
只要把页面放在这个组件中，就能实现跟大厂们类似的效果。这种方式下不管屏幕有多大，分辨率有多高，只要屏幕的比例跟你定的比例一致，都能呈现出完美效果。而且开发过程中，样式的单位也可以直接用px，省去了转换的烦恼~~~
注：图表插件bizcharts在css缩放下会有鼠标移入时像素偏移的bug，由于是基于antv的，这主要是antv的bug，我写这篇文章的时候官方还未修复这个bug，echarts没有这个bug。
最后附上npm链接：
VUE的element-ui+echarts视图可视化
template
div class="bar-chart"
div id="main" ref="main"
/div
/div
/template
script
/* 引入echarts组件 */
import * as echarts from 'echarts';
export default {
name:"BarChart",
mounted(){
// 基于准备好的dom，初始化echarts实例
/* var myChart = echarts.init(document.getElementById('main')); */
var myChart = echarts.init(this.$refs.main);
// 绘制图表
myChart.setOption({
title: {
text: '柱状图'
},
tooltip: {},
xAxis: {
axisLabel: {
/* 显示所有的x轴的数据 */
interval: 0,
/* 放不下的倾斜角度 */
rotate: 80,
/* 数据距离刻度线的距离 */
margin: 15,
},
/* data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] */
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
/* data: [5, 20, 36, 10, 10, 20] */
data:[{
value:5,
name:'衬衫',
/* 给某一柱子单独设置颜色 */
itemStyle:{
color:{
type:"linear",
x:0,
y:0,
x2:0,
y2:1,
colorStops:[
{
offset:0,
color:"red"//柱子最上面是红色
},{
offset:1,
color:'blue'//柱子最下面颜色蓝色
}
],
global:false
},
},
},
{
value:36,
name:'雪纺衫',
itemStyle:{
color:{
type:"linear",
x:0,
y:0,
x2:0,
y2:1,
colorStops:[
{
offset:0,
color:"pink"//柱子最上面是粉色
},{
offset:1,
color:'yellow'//柱子最下面颜色黄色
}
],
global:false
},
},
},{
value:10,
name:'裤子'
},{
value:10,
name:'高跟鞋'
},{
value:20,
name:'袜子'
}
]
}
]
});
window.BarChart = myChart
}
}
/script
style scoped lang="scss"
#main{
height: 300px;
}
/style
template
div class="line-chart"
div id="main" ref="main"
/div
/div
/template
script
/* 引入echarts组件 */
import * as echarts from 'echarts';
export default {
name:"LineChart",
mounted(){
// 基于准备好的dom，初始化echarts实例
/* var myChart = echarts.init(document.getElementById('main')); */
var myChart = echarts.init(this.$refs.main);
// 绘制图表
myChart.setOption({
title: {
text: '折线图'
},
tooltip: {},
xAxis: {
axisLabel: {
/* 显示所有的x轴的数据 */
interval: 0,
/* 放不下的倾斜角度 */
rotate: 0,
/* 数据距离刻度线的距离 */
margin: 15,
},
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}
]
});
window.LineChart = myChart
}
}
/script
style scoped lang="scss"
#main{
height: 300px;
}
/style
template
div class="pie-chart"
div id="main" ref="main"
/div
/div
/template
script
/* 引入echarts组件 */
import * as echarts from 'echarts';
export default {
name:"PieChart",
mounted(){
// 基于准备好的dom，初始化echarts实例
/* var myChart = echarts.init(document.getElementById('main')); */
var myChart = echarts.init(this.$refs.main);
/* ref 是dom本身不是id */
// 绘制图表
myChart.setOption({
title: {
text: '饼图'
},
/* grid:{
width:'50%',
height:'50%'
}, */
/* radius:'50%', */
tooltip: {},
xAxis: {
show:false,
/* data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] */
},
yAxis: {
show:false,
},
series: [
{
name: '销量',
type: 'pie',
/* data: [5, 20, 36, 10, 10, 20] */
data:[{
value:5,
name:'衬衫'
},{
value:20,
name:'羊毛衫'
},{
value:36,
name:'雪纺衫'
},{
value:10,
name:'裤子'
},{
value:10,
name:'高跟鞋'
},{
value:20,
name:'袜子'
}
]
}
]
});
window.PieChart = myChart
}
}
/script
style scoped lang="scss"
#main{
height: 300px;
width: 250px;
}
/style
template
div
!-- el-row 表示一行 一行分成了24份
:gutter="12" 表示间隔的大小为12份--
!-- el-col 表示一列 :span="8"表示一列占据一行8份的大小
3个:span="8" 表示占据三行--
el-row :gutter="5"
el-col :span="8"
!-- el-card shadow="always" 卡片阴影效果一直显示 --
!-- shadow="hover" 卡片阴影效果手摸上去显示 --
!-- shadow="never" 阴影效果永不显示--
el-card shadow="always"
bar-chart/bar-chart
/el-card
/el-col
el-col :span="8"
el-card shadow="always"
line-chart/line-chart
/el-card
/el-col
el-col :span="8"
el-card shadow="always"
pie-chart /
/el-card
/el-col
/el-row
el-row :gutter="10" style="margin-top:15px"
el-col :span="24"
el-card shadow="always"
中国地图
/el-card
/el-col
/el-row
/div
/template
script
import BarChart from '@/components/BarChart.vue'
import LineChart from '@/components/LineChart.vue'
import PieChart from '@/components/PieChart.vue'
export default {
components:{
BarChart,
LineChart,
PieChart
},
mounted(){
/* 页面尺寸一边画 就重新 resize 渲染图标*/
window.onresize = function (){
window.BarChart.resize();
window.LineChart.resize();
window.PieChart.resize();
}
}
};
/script
style
/style
Vue 大屏自适应
在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题
废话不多说，先上图
[图片上传失败...(image-6ca2f3-1648048125368)]
可以看到，我们通过等比例缩放的方式，实现了自适应，同时我们也为此发布了 vue 组件 v-scale-screen
v-scale-screen 使用css属性transform实现缩放效果，进行等比例计算，达到等比例缩放的效果，同时我们也支持铺满全屏，宽度等比，高度等比，等自适应方案
在Vue项目中实现数据可视化操作
话说最近一直在攻在网上花二十块大洋买的vue音乐播放器项目，收获颇多！对vue项目整体的流程有了更进一步的了解，打算花点空余时间把这个项目再撸几遍，然后转入京东的项目实战中。。。
实际工作中一直涉及的是数据可视化操作（Echarts、Highcharts），即大量数据图表展示，却独独没有用到丁点儿的vue知识，感觉实在是让人憋得心慌，晚上没事干脆试验一把，如题：在Vue项目中实现数据可视化操作
Echarts 步骤：
一、安装插件
cnpm install echarts -D
注：echarts 也不能通过 Vue.use() 进行全局调用
所以，通常在需要使用图表的 .vue文件中直接引入
import echarts from 'echarts'
也可以在main.js中引入，然后修改原型链
Vue.prototype.$echarts = echarts
这样在全局中就可以直接使用了
let mychart = this.$echarts.init(document.getElementById('mychart'))
二、创建图表
由于一般情况我们会在组件中使用，这里我也贴近实际开发，举的例子就是应用于组件中
数据导入
这样图表就可以在页面中展示出来了
问题：这里引入的 echarts 包含了所有图表，但有时候我们只需要一两个基本图表，这时候完整的 echarts 就显得累赘，所以：
二、按需引入
// 引入基本模板letecharts = require('echarts/lib/echarts')
// 引入饼图组件require('echarts/lib/chart/pie')
// 引入提示框和图例组件require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
可以按需引入的模块列表见
继续引出问题：在echarts中图表宽高如果不写，那么就相当于作死，所以nozuonodie，所以：
三、适应容器
let chartBox = document.getElementsByClassName('charts')[0]
let myChart = document.getElementById('myChart')
// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
function resizeCharts () {
myChart.style.width = chartBox.style.width + 'px'
myChart.style.height = chartBox.style.height + 'px'
}
// 设置容器高宽
resizeCharts()
let mainChart = echarts.init(myChart)
mainChart.setOption(options)
四、扩展
可以把这个案例模块化，设计成一个可复用组件，只需传入id、options既可完成图表渲染
参考案例：
刚好，参考案例中用的是highcharts
如何在网页上实现千万级别的大数据可视化渲染?
实现千万级别的大数据可视化渲染技巧：
借助Echarts、HighCharts、D3.js等开源的可视化插件，嵌入代码，开发成插件包，可视化工程师和前端开发常用。
代表工具FineReport（），通用的报表制作和数据可视化工具，是一个开放的商业报表工具。好比Excel，小到可以存储统计数据、制作各式各样的图表、dashboard，大到制作财务报表、开发进销存系统。大家若不熟悉，可自行和Excel绑定对比。
Vue的背后
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。用Vue的时候不需要开发者全部学会，而是学一部分就可以用一部分，就可以简单概括为渐进式的前端框架。
Vue项目-启动与本机部署
验证是否成功： 电脑win键+R--- 输入cmd ---版本号不一样没关系，输出结果为版本号就表示安装成功。
在项目终端terminal输入命令行：
NPM详细介绍可看++：----- [NPM 使用介绍 | 菜鸟教程]
启动本地服务--- Ctrl 点击红框链接就可以看到自己的Vue项目啦~~
！注意是serve不是server嘿嘿因为我也经常写错~~~
***（这步可做可不做哦~）***
设置如下：
打开config文件夹下的index.js文件
查找（ Ctrl+F ） autoOpenBrowser更改配置为true
以下是博主参与的Vue项目demo:
大屏数据可视化嘿嘿
关于如何讲项目打包放到Github与远程服务器的部署，我们下期再见~嘿嘿嘿