Draggable & Resizable Data Visualization System – x-chart

Draggable & Resizable Data Visualization System – x-chart

x-chart is a draggable & resizable data visualization dashboard. Based on Vue.js, Vue-echarts and vue-grid-layout.

vue echarts Build Status license

简体中文 | English

Introduction

x-chart is a draggable & resizable data visualization dashboard. Based on Vue.js, vue-echarts and vue-grid-layout.

Notice This version is rewrote by typescript, if you want the old version by javascript, you can checkout tag v0.1.2.

Develop

# clone the project
git clone https://github.com/yugasun/x-chart.git

# install dependency
npm install

# develop
npm run dev

# build
npm run build

# deploy for Github page
npm run deploy

# build docker image
npm run docker:build

# run docker image in container
npm run docker:run

Feature

  • [x] Configurable dashboard: all modules render depend on the api.
  • [x] Chart modules are draggable and resizable.
  • [x] Cache build js and css files in localStorage using bowl.js.
  • [x] Customized and beautify charts using echarts.
  • [x] Frontend data mock demo using mockjs.
  • [x] Docker deploy.
  • [x] Refactor with Typescript.

Demo

x-chart

Online Preview.

License

MIT

Copyright (c) 2018-present yugasun

Github Repository

Tags: #VueJs