数据可视化项目

一、什么是数据可视化

数据可视化就是把数据以更加直观的方式进行呈现， 我们常用图表化来对数据进行表示。我们通过各种形式多样的图表对数据进行分许可视化，帮助人们更加直观的了解到具体信息。

二、数据可视化的好处

• 清晰有效地传达与沟通信息
  数据可视化的好处之一就是能够清晰有效的传达信息和沟通信息. 继续看刚才的那个例子, 如果使
  用同样的数据, 换成另外一种展现形式, 比如下边的这幅饼图. 我们可以很容易的就看出每个产品的
  销量占比.不需要太多的脑力计算和思维转换.

三、DataV生成的案例

Page not found · DataV

四、vue的混入（mixins）

一、一个简单的实例：

二、创建一个mixins

三、使用Mixins

 

五、vue拖拽组件 vuedraggable

 一、vuedraggable 使用方式

npm/cnpm install vuedraggable
 
import vuedraggable from 'vuedraggable';

二、vuedraggable 简单案例

<template>   <vuedraggable class="wrapper" v-model="list">     <transition-group>       <div v-for="item in list" :key="item" class="item">         <p>{{item}}</p>       </div>     </transition-group>   </vuedraggable> </template>    <script> import vuedraggable from 'vuedraggable';    export default {   name: 'HelloWorld',   components: {vuedraggable},   props: {   },   data() {     return {       list: [1,2,34,4,54,5]     }   },   updated() {     console.log(this.list)   },   methods: {   } } </script> <style scoped> .wrapper {   display: flex;   justify-content: center;   width: 100%; } .item{   width: 300px;   height: 50px;   background-color: #42b983;   color: #ffffff; } </style>

三、官网案例 

       https://david-desmaisons.github.io/draggable-example/   

四、 indexDb 浏览器储存  

      https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

五、Echart实例

官网案例：Examples - Apache ECharts

非官网案例：https://www.makeapie.com/explore.html

六、Webgl

WebGL - Web API 接口参考 | MDN

七、three.js

Three.js中文网

八、cesium.js

CesiumJS – Cesium

九、 jsPlunmb

https://docs.jsplumbtoolkit.com/community/current/index.html

十、vue-color-setting  

十一、webpack 

十二、地 图 vue datav 可视化 图表的生成 数据可视化DataV_数据分析工具_双十一数据可视化_三维可视化-阿里云 

十三、vue-echart

vue-echart - npm