Skip to content

QingWei-Li/laue

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Laue

Build Status Coverage Status npm

πŸ––πŸ“ˆ Modern charts for Vue.js

Documentation: https://laue.js.org

Features

  • It depends on several small submodules in D3, so it's very reliable and lightweight.
  • The implementation for Vue.js, so it is composable and supports SSR.

Installation

npm i laue

Usage

import Vue from 'vue';
import { Laue } from 'laue';

Vue.use(Laue);

// On demand
import { Cartesian, Line } from 'laue';

Vue.component(Cartesian.name, Cartesian);
Vue.component(Line.name, Line);

Demo

A dead simple example

<div id="app">
    <la-cartesian :width="300" :height="150" :data="values">
        <la-line prop="pv"></la-line>
        <la-y-axis></la-y-axis>
        <la-x-axis prop="name"></la-x-axis>
        <la-tooltip></la-tooltip>
  </la-cartesian>
</div>

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/laue"></script>
<script>
    new Vue({
        el: '#app',
        data: () => ({
            values: [
                { name: 'Page A', pv: 2000 },
                { name: 'Page B', pv: 3000 },
                { name: 'Page C', pv: 1200 }
            ]
        })
    })
</script>

Inspired

License

MIT