viser-cell-vue

A toolkit fit for data vis engineer (vue version).

Install

1$ npm install --save viser-cell-vue

Usage

1<template>
2  <div>
3    <v-chart :height="400" :width="200" :data="data" :pixelRatio="pixelRatio">
4      <v-tooltip></v-tooltip>
5      <v-axis></v-axis>
6      <v-legend></v-legend>
7      <v-bar :position="'月份*月均降雨量'" :color="'name'" :adjust="adjust"></v-bar>
8    </v-chart>
9  </div>
10</template>
11
12<script>
13const data = [
14  { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
15  { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
16  { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
17  { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
18  { name: 'London', 月份: 'May.', 月均降雨量: 47 },
19  { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
20  { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
21  { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
22  { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
23  { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
24  { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
25  { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
26  { name: 'Berlin', 月份: 'May.', 月均降雨量: 52.6 },
27  { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
28  { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
29  { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }
30];
31
32export default {
33  data() {
34    return {
35      data,
36      pixelRatio: window.devicePixelRatio,
37      adjust: {
38        type: 'dodge',
39        marginRatio: 0.05,
40      }
41    };
42  },
43};
44</script>