69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
<template>
|
|
<gz-dash
|
|
icon="$ayiSplotch"
|
|
:add-url="'widgets/0'"
|
|
:update-frequency="32000"
|
|
@dash-refresh="loadData"
|
|
v-on="$listeners"
|
|
v-bind="$attrs"
|
|
>
|
|
<template slot="main">
|
|
<div class="ml-4 mt-1">
|
|
<gz-chart-line
|
|
:width="400"
|
|
:height="240"
|
|
:chart-data="obj"
|
|
:options="{
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: { display: false }
|
|
}"
|
|
></gz-chart-line>
|
|
</div>
|
|
</template>
|
|
</gz-dash>
|
|
</template>
|
|
<script>
|
|
import Palette from "../api/palette";
|
|
import GzDash from "../components/dash-base.vue";
|
|
export default {
|
|
components: {
|
|
GzDash
|
|
},
|
|
data() {
|
|
return {
|
|
obj: {}
|
|
};
|
|
},
|
|
props: {},
|
|
created() {},
|
|
computed: {},
|
|
methods: {
|
|
loadData: function() {
|
|
this.obj = {
|
|
labels: [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July"
|
|
],
|
|
datasets: [
|
|
{
|
|
borderColor: Palette.color.soft_deep_blue,
|
|
backgroundColor: Palette.color.soft_deep_blue,
|
|
fill: false,
|
|
radius: 5,
|
|
hoverRadius: 10,
|
|
hitRadius: 5,
|
|
data: [0, 10, 5, 2, 20, 30, 45]
|
|
}
|
|
]
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|