本篇文章给大家谈谈vue实现数据可视化，以及vue实现数据可视化大屏对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
在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
Vue 前端可视化活动编辑器
先看效果，为一个可视化活动编辑器。
基于 JSON Schema 开箱即用的简单活动可视化编辑器。
在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。
JSON Schema 主要运用在如下几点：
首先可视化编辑器需要做到板块的管理，这些板块支持可视化的编辑配置和效果展示，最终相互组装为一个页面。
每个板块我们不可避免的需要一个 View组件 来做展示，因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现，然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。
如下图：
这样当我们在添加新的板块时，只需要开发一个 View组件 ，和书写一份 JSON Schema 来定义数据即可。
添加新的板块只需要在 config/tools.js 导入新增的板块，并且配置好工具栏即可，如：
新增板块文件结构如下：( viewComponents/FlashSaleGoodsList/index.js 这里对应上面工具栏配置导入的组件包文件)
导出模块解释如下：
如果需要更多 vue-json-schema-form 参数可直接在 packages/demo/src/vue-editor/views/editor/Editor.vue 渲染 VueElementForm 组件时添加即可。
整个实现相对比较简单，感兴趣的可以花上两个小时看下源码，欢迎讨论提问。
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实现数据可视化的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue实现数据可视化大屏、vue实现数据可视化的信息别忘了在本站进行查找喔。
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » vue实现数据可视化（vue实现数据可视化大屏）
