Git Product home page Git Product logo

vue-data-visualization's Introduction

Vue 3 Data Visualization

项目简介

GitHub stars GitHub stars

star fork

本项目为个人项目, 主要使用 Vue 3, Echarts 5, Element Plus 进行开发. 使用原生 JavaScript 实现元素的拖拽与缩放.

该项目主要为实现通用的可视化大屏的简单配置, 对于特殊图表仍然需要二次开发.

项目预览: https://miyuesc.github.io/data-visualization/

国内同步镜像: https://miyuesc.gitee.io/data-visualization/

预览地址可能会存在版本不符的问题, 建议下载运行

主要功能

  • ECharts常用图表
  • 标题单位
  • 组件拖拽/缩放
  • 边框背景
  • 图表坐标轴配置
  • 图例设置
  • 画布整体缩放
  • 组件层级调整
  • 组件图层列表
  • 常用形状组件
  • 标题/文字组件
  • 图表的不同设置
  • 高德地图组件
  • 常用列表/轮播/数字动画等组件
  • 预览/导出json
  • 数据源配置
  • ...

使用

1. 下载或克隆该项目到本地

git clone https://github.com/miyuesc/vue-data-visualization.git -b main

2. 安装依赖

// yarn run install
npm run install

3. 运行预览

// yarn run build
npm run build

运行预览

1. 初始界面

image-20210705145317801

2. 拖拽效果

image-20210705145333404

3. 标题与单位配置

image-20210705145411569

4. 背景边框配置

image-20210705145621180

5. X轴/Y轴配置

image-20210705145838804

6. 图层管理与锁定

image-20210705145932618

友情赞助

偷偷丢个赞赏码吧~~~~

微信:如果对您有帮助,您可以请我喝杯咖啡~~

支付宝:如果对您有帮助,您可以请我喝杯咖啡~~

学习交流

如果您觉得这些文章对您有帮助,想和我一起学习,欢迎您关注我的微信订阅号。

订阅号名称:前端小白MiyueFE

订阅号:前端小白MiyueFE

vue-data-visualization's People

Contributors

miyuesc avatar csskr avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.