TransferBar.vue 1010 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <div :style="{ padding: '0 0 32px 32px' }">
  3. <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
  4. <v-chart
  5. height="254"
  6. :data="data"
  7. :scale="scale"
  8. :forceFit="true"
  9. :padding="['auto', 'auto', '40', '50']">
  10. <v-tooltip />
  11. <v-axis />
  12. <v-bar position="x*y"/>
  13. </v-chart>
  14. </div>
  15. </template>
  16. <script>
  17. const tooltip = [
  18. 'x*y',
  19. (x, y) => ({
  20. name: x,
  21. value: y
  22. })
  23. ]
  24. const scale = [{
  25. dataKey: 'x',
  26. title: '日期(天)',
  27. alias: '日期(天)',
  28. min: 2
  29. }, {
  30. dataKey: 'y',
  31. title: '流量(Gb)',
  32. alias: '流量(Gb)',
  33. min: 1
  34. }]
  35. export default {
  36. name: 'Bar',
  37. props: {
  38. title: {
  39. type: String,
  40. default: ''
  41. }
  42. },
  43. data () {
  44. return {
  45. data: [],
  46. scale,
  47. tooltip
  48. }
  49. },
  50. created () {
  51. this.getMonthBar()
  52. },
  53. methods: {
  54. getMonthBar () {
  55. this.$http.get('/analysis/month-bar')
  56. .then(res => {
  57. this.data = res.result
  58. })
  59. }
  60. }
  61. }
  62. </script>