本篇文章给大家谈谈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. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请后台提交工单处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请后台提交工单！
【免责声明】：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
【关于转载】：
本站尊重互联网版权体系，本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读，无任何商业用途，所有内容版权归原作者所有
如本站（文章、内容、图片、视频）任何资料有侵权，先说声抱歉；麻烦您请联系请后台提交工单，我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
注：本站资源来自网络转载，版权归原作者和公司所有，如果有侵犯到您的权益，请第一时间联系我们处理！
-----------------------------------------------------------------------------------------------------------
【版权声明】：
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后，情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » vue实现数据可视化（vue实现数据可视化大屏）
