vue数据可视化大屏（Vue 大屏自适应）
本文目录
Vue 大屏自适应
在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题
废话不多说，先上图
可以看到，我们通过等比例缩放的方式，实现了自适应，同时我们也为此发布了 vue 组件 v-scale-screen
v-scale-screen 使用css属性transform实现缩放效果，进行等比例计算，达到等比例缩放的效果，同时我们也支持铺满全屏，宽度等比，高度等比，等自适应方案
关于数据可视化的web前端
所谓数据可视化的web的前端其实从一个广义角度讲，跟传统网页开发没有什么区别。都是数据模板，组件化模块化也都是类似。前后端分离什么的，也是跟传统网页开发没有两样。现在node作为中间层来做分离方案是比较多(天猫的wormhole, 淘宝的midway), 数据处理交给java或者其他更适合的，node用来做密集IO和模板展现。（但是对于体量不大的应用，其实不需要考虑这么多）
要不要做成单页面应用提高体验取决于你的应用还得看场景，还有开发复杂度等因素（其实一开始不建议做成单应用，除非一开始就有完整的规划）。如果类似Google Analytics的程序，也不是整站都直接单应用，还是取决于场景。因为往往在网页中单应用的形式，往往复杂度都会高很多，处理的问题也会叠加，图表的性能问题，内存问题，持久性问题，过场的问题等等，都是需要考虑的。
之前我做过一个项目，其实都没用组件库(当然后来维护问题会很多,也不够优雅)。但是对于构建组件库，无论是Polymer、react感觉都可以，react这么火，但是还是选自己比较熟悉的更好。
前端框架上最好还是mvvm的框架，vue, angular, react都很不错，用过vue，现在更倾向于使用react。图表展示，是更重数据交互的，所以肯定是开发以数据驱动的方式来。图表库来说，echarts是比较牛逼的了，底层是canvas，百度开源的。highcharts是svg的，老牌牛逼图表库，商业使用需要授权。之前我们用的是kcharts(阿里自己开发)。现在更倾向于百度Echarts，从图表展现和用例丰富上，可以减少很多自己开发的工作量。
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: */
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:
}
]
});
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: */
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》
更多文章：
数据库管理系统和数据库系统分别侧重（数据库，数据库管理系统，数据库系统，这三个分别是什么意思并举个实例）
2026年9月7日 17:00
2026年9月7日 16:10
2026年9月7日 15:40
springmvc的依赖（springMVC的注入方式有哪几种，这与springMVC依赖）
2026年9月7日 14:00
2026年9月7日 13:00
2026年9月7日 12:40
display flex 自动换行（overflow-y:hidden;overflow-x:auto;无效解决方法）
2026年9月7日 11:00
2026年9月7日 10:50
timestamp without time zone（Postgresql中to_date（）函数使用问题）
2026年9月7日 09:40
2026年9月7日 04:20
