XCHART

x-chart is a draggable & resizable data visualization system

Introduction

x-chart is a draggable & resizable data visualization dashboard. Based on Vue.jsvue-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<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>github<span class="token punctuation">.</span>com<span class="token operator">/</span>yugasun<span class="token operator">/</span>x<span class="token operator">-</span>chart<span class="token punctuation">.</span>git

# install dependency
npm install

# develop
npm run dev

# build
npm run build

# build <span class="token keyword">with</span> localStorage cache
npm run build<span class="token punctuation">:</span>cache

# deploy <span class="token keyword">for</span> Github page
npm run deploy

# build docker image
npm run docker<span class="token punctuation">:</span>build

# run docker image <span class="token keyword">in</span> container<span class="token punctuation">,</span> after <span class="token keyword">this</span> you can visit demo by<span class="token punctuation">:</span> http<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>localhost<span class="token punctuation">:</span><span class="token number">8080</span>
npm run docker<span class="token punctuation">:</span>run

# run into current docker container
npm run docker<span class="token punctuation">:</span>exec
JavaScript

Feature

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

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.