vue数据库数据可视化（vue网页前端3d数据可视化）

本篇文章给大家谈谈vue数据库数据可视化，以及vue网页前端3d数据可视化对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue 前端可视化活动编辑器
• 2、在Vue项目中实现数据可视化操作
• 3、如何实现数据库中所有的表在vue前端页面中展示
• 4、在Vue中使用echarts
• 5、VUE的element-ui+echarts视图可视化
• 6、又一款基于Vue的数据可视化组件库，Github上star超1.4k，太酷炫

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项目中实现数据可视化操作

        话说最近一直在攻在网上花二十块大洋买的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前端页面中展示

使用cnpminstallecharts-D。

1、安装插件cnpminstallecharts-D。

2、创建图表，将数据引入。

3、使用容器，使chart自适应高度和宽度，通过窗体高宽计算容器高宽。

4、把这个案例模块化，设计成一个可复用组件，只需传入id、options即可。

在Vue中使用echarts

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~

我的示例是在vue-cli搭建

首先需要全局引入

在main.js中

在Echarts.vue中

div id="myChart" :style="{width: '300px', height: '300px'}"/div

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这样一个简单的图表就完成了，是不是觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何操作？

由于全局引入会将所有的echarts图表打包，导致体积过大

在Echarts.vue文件中

使用 require 而不是 import

基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。

从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便

vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。

下面是一个我自己对echarts进行的一个简单的vue组件的集成。

在echarts中

子组件：

props部分是我接收到的参数，父组件获取数据分发，data是父组件分发给echarts的数据源。

父组件：

如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~

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的数据可视化组件库，Github上star超1.4k，太酷炫

组件库名称：DataV

项目地址：

光看截图就知道太酷炫了，而且根本不需要担心拿在手里会不会用，官方的文档也是非常详细

非常多的组件可以选择，但是相对于收费版的阿里云datav还是很不错的选择，有更好的同类组件库欢迎在下方留言补充

关于vue数据库数据可视化和vue网页前端3d数据可视化的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。