数字孪生可视化3d建模大屏,echarts,vue,cezium

Related tags

DigitalTwinScreen
Overview

在线效果演示

项目架构

│  vue.config.js                     // webpack配置
├─public
│      favicon.ico                   // ico图标
│      index.html                    // 入口html文件
└─src
    │  App.vue                       // 根组件
    │  main.js                       // 程序入口文件
    ├─assets
    │  ├─iconfont                     // 引用阿里巴巴矢量图标库
    │  ├─img                          // 存放公共图片文件夹
    │  ├─js
    │  │      utils.js                // 封装工具类方法
    │  └─styles
    │      │  base.scss               // 基础样式文件
    │      │  common.scss             // 公用样式文件
    │      └─fonts                    // 字体库文件
    ├─components
    │  │  index.js                    // 封装组件库
    │  ├─bar3d                        // 3D立体柱状图
    │  ├─bgAnimation                  // 登录界面背景图动画
    │  ├─cakeLinkage                  // 柱饼组合联动
    │  ├─circleNesting                // 圆环套圆环
    │  ├─circleRunway                 // 环形跑道图
    │  ├─colorfulArea                 // 多彩轮播面积
    │  ├─colorfulRadar                // 多彩雷达
    │  ├─companySummary
    │  │      business.vue            // 业务范围
    │  │      distrbution.vue         // 客户分布
    │  │      history.vue             // 发展历程
    │  │      income.vue              // 营业收入
    │  │      talent.vue              // 人才队伍
    │  │      wordCloud.vue           // 产品热词
    │  ├─dynamicLine                  // 动态轮播折线图
    │  ├─dynamicList                  // 动态列表动画
    │  ├─flashCloud                   // 闪动云
    │  ├─gauge                        // 仪表盘
    │  ├─modal                        // 自定义全局模态框
    │  ├─pyramid                      // 金字塔动画
    │  ├─pyramidTrend                 // 金字塔趋势
    │  ├─rainbow                      // 彩虹轨道图
    │  ├─ringPie                      // 环形饼图
    │  ├─ringPin                      // 环形气泡图
    │  ├─rotateColorful               // 旋转多彩图
    │  ├─scanRadius                   // 扫描半径图
    │  ├─scrollArc                    // 滚动弧形线
    │  ├─seamless                     // 新闻无缝滚动
    │  ├─sinan                        // 司南排名图
    │  ├─staffMix                     // 人员占比
    │  ├─szBar                        // 双轴柱状图
    │  ├─toast
    │  │      index.js                // 注册全局消息提示框组件
    │  │      index.vue               // 自定义消息提示框模板
    │  └─waterPolo
    │          index.vue              // 水球图、水波图
    ├─router
    │      index.js                   // 单页面路由注册组件
    ├─store
    │      index.js                   // 状态管理仓库未使用到
    └─views
            Brand.vue                 // 公司品牌介绍
            Home.vue                  // 酷屏首页统计图
            Login.vue                 // 登录界面

技术栈

  • vue2.6
  • echarts4.7
  • axios
  • webpack
  • ES6
  • scss
  • css3
  • jquery
  • iconfont

功能模块

  • 登录界面抖动
  • 粒子动效
  • 背景图轮播
  • 自定义全局模态框
  • 自定义消息提示框
  • 酷屏首页组件库
  • 各种酷炫小部件
  • 炫酷展示公司品牌

下载安装依赖

git clone https://github.com/jackchen0120/vueDataV.git
cd vueDataV
npm install 或 yarn

开发模式

npm run serve

运行之后,访问地址:http://localhost:8081

生产环境打包

npm run build
Apache ECharts component for Vue.js.

Vue-ECharts Vue.js component for Apache ECharts. ???? 中文版 Uses Apache ECharts 5 and works for both Vue.js 2/3. ?? Heads up ?? If your project is using

Baidu EFE team 6.1k Jun 14, 2021
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)

vue-echarts-v3 Vue.js v2.x+ component wrap for Apache ECharts (incubating) v3.x+ Feature Lightweight, efficient, on-demand binding events; Support for

xLsDg 887 May 30, 2021
📊📈 ECharts wrapper component for Vue 3 and 2

简体中文 | English ECharts For Vue ?? ?? ECharts wrapper component for Vue 3 and 2 Features Support for Vue 3 and 2; Conform to the habits of Vue and ECha

null 49 Jun 12, 2021
数字孪生可视化3d建模大屏,echarts,vue,cezium

在线效果演示 项目架构 │ vue.config.js // webpack配置 ├─public │ favicon.ico // ico图标 │ index.html

tmqq2333 11 May 18, 2021
基于 Vue2.0 和 ECharts 封装的图表组件📈📊

v-charts Document | Sample Project | English | 中文 Chart components based on Vue2.x and Echarts Features Uniform data format: Use an uniform data forma

饿了么前端 6.4k Jun 5, 2021
DataV Vue 一个基于 Vue3.x 的数据可视化(DataV)项目

DataV Vue 一个基于 Vue3.x 的数据可视化项目 ?? Vue 3.0+ ?? TypeScript 4.2+ ?? ECharts 5.0+ 简介 国外 GitHub 国内 Gitee 预览 DataV 在线预览 因为项目中的 Mock 服务

Allen 62 Jun 9, 2021
Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables

jQWidgets Vue Components Demos You can view them online here: https://www.jqwidgets.com/vue/. Build modern Web Apps with jQWidgets and Vue. jQWidgets

jQWidgets 50 May 31, 2021
📊 Vue.js wrapper for Chart.js

vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Demo & Docs ?? Demo ?? Docs Compatibility

Jakub 4.3k Jun 12, 2021
Create beautiful JavaScript charts with one line of Vue

Vue Chartkick Create beautiful JavaScript charts with one line of Vue See it in action Supports Chart.js, Google Charts, and Highcharts Quick Start Ru

Andrew Kane 684 Jun 3, 2021
Lightweight Vue component for drawing pure CSS donut charts

vue-css-donut-chart Lightweight Vue component for drawing pure CSS donut charts Live demo Live demo can be found on the project page – https://dumptyd

Saad 110 Jun 10, 2021
Base on Vue2.0 wrapper for ChartJs. (Deprecated)

Deprecated Package ?? This package is no longer maintain. ?? vue-charts Base on Vue2, wrapper for ChartJs. Vue js Chart js Work well with Laravel Rend

Gimmy 367 May 21, 2021
:bar_chart: Highcharts component for Vue

vue-highcharts Highcharts component for Vue. Requirements Vue >= 3.0.0 Highcharts >= 4.2.0 Installation npm i -S vue-highcharts For Vue 2, please run

Zhenye Wei 406 Jun 4, 2021
TradingVue.js is a hackable charting lib for traders

TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

TVJS 1.2k Jun 13, 2021
Reactive Vue.js wrapper for Google Charts lib

vue-google-charts Reactive Vue.js wrapper for Google Charts lib Table of contents Installation Usage Example Installation npm i vue-google-charts Def

Devstark 368 Jun 11, 2021