Skip to content

๐Ÿš€ x-chart is a draggable & resizable data visualization system

License

Notifications You must be signed in to change notification settings

yugasun/x-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

43 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Vue3 ECharts Vite Pinia TypeScript

็ฎ€ไฝ“ไธญๆ–‡ | 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
pnpm install

# develop
pnpm run dev

# build
pnpm run build

# deploy for Github page
pnpm run deploy

# build docker image
pnpm run docker:build

# run docker image in container, after this you can visit demo by: http://localhost:8080
pnpm run docker:run

# run into current docker container
pnpm run docker:exec

Feature

  • Base on template vue-ts-starter (Vue3 + Vite + TypeScript)
  • Configurable dashboard: all modules render depend on the api.
  • Chart modules are draggable and resizable.
  • Customized and beautify charts using echarts.
  • Frontend data mock demo using msw Seamless REST/GraphQL API mocking library for browser and Node.js.
  • Docker deploy.

Demo

x-chart

Online Preview.

Notice

For Chinese if you npm install slowly, you can create .npmrc file with below content:

registry=https://registry.npm.taobao.org/
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

License

MIT

Copyright (c) 2018-present yugasun