@lq-viser/viser-cell-vue
v2.1.5
Published
viser-cell-vue is vue of viser-cell.
Downloads
5
Readme
viser-cell-vue
A toolkit fit for data vis engineer (vue version).
Install
$ npm install --save viser-cell-vue
Usage
<template>
<div>
<v-chart :height="400" :width="200" :data="data" :pixelRatio="pixelRatio">
<v-tooltip></v-tooltip>
<v-axis></v-axis>
<v-legend></v-legend>
<v-bar :position="'月份*月均降雨量'" :color="'name'" :adjust="adjust"></v-bar>
</v-chart>
</div>
</template>
<script>
const data = [
{ name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
{ name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May.', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: 'Berlin', 月份: 'May.', 月均降雨量: 52.6 },
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }
];
export default {
data() {
return {
data,
pixelRatio: window.devicePixelRatio,
adjust: {
type: 'dodge',
marginRatio: 0.05,
}
};
},
};
</script>