BJ_web_developers / lzsandtable

Commit ea141a52bf40791d5850ddd9187e8d83ab450239

Authored by liuqimichale
1 parent d91b873f

泊位

Inline Side-by-side
Showing 3 changed files with 96 additions and 37 deletions
src/components/VBerth.vue 0 → 100644
  View file @ea141a5
  1 +<template>
  2 + <div class="theme-wrap">
  3 + <card-title> <span>泊位消息</span></card-title>
  4 + <div class="theme-body">
  5 + <account-num>
  6 + <span>总计</span>
  7 + </account-num>
  8 + <div class="income-echart" id="income-echart">
  9 + <bar-chart :chart-data="pieChartData"></bar-chart>
  10 + </div>
  11 + </div>
  12 + </div>
  13 +</template>
  14 +
  15 +<script>
  16 +import CardTitle from './base/CardTitle'
  17 +import AccountNum from './base/AccountNum'
  18 +import barChart from './base/barChart'
  19 +export default {
  20 + name: 'VBerth',
  21 + components: {
  22 + CardTitle,
  23 + AccountNum,
  24 + barChart
  25 + },
  26 + data() {
  27 + return {
  28 + pieChartData: {
  29 + yData: [1,1],
  30 + legendData: ['空余','占有']
  31 + },
  32 + }
  33 + },
  34 + mounted(){
  35 + //this.drawBar();
  36 + },
  37 + methods: {
  38 + drawBar() {
  39 + let myChart = echarts.init(document.getElementById('income-echart'));
  40 + let option = {
  41 + color: ['#f44'],
  42 + tooltip : {
  43 + trigger: 'axis',
  44 + axisPointer : {
  45 + type : 'shadow'
  46 + }
  47 + },
  48 + xAxis : [
  49 + {
  50 + type : 'category',
  51 + data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
  52 + axisTick: {
  53 + alignWithLabel: true
  54 + }
  55 + }
  56 + ],
  57 + yAxis : [
  58 + {
  59 + type : 'value'
  60 + }
  61 + ],
  62 + series : [
  63 + {
  64 + name:'每月花费',
  65 + type:'bar',
  66 + barWidth: '60%',
  67 + data:[995,666,444,858,654,236,645,546,846,225,547,356]
  68 + }
  69 + ]
  70 + };
  71 + myChart.setOption(option);
  72 +
  73 + }
  74 + }
  75 +}
  76 +</script>
  77 +
  78 +<style scoped lang="scss">
  79 + .theme-wrap {
  80 + height: 100%;
  81 + }
  82 + .theme-body {
  83 + height: calc(100% - 30px);
  84 + margin-left: 20px;
  85 + }
  86 + .income-echart{
  87 + height: 70%;
  88 + }
  89 +
  90 +</style>
... ...
src/components/VIncome.vue
  View file @ea141a5
... ... @@ -35,42 +35,7 @@ export default {
35 35 //this.drawBar();
36 36 },
37 37 methods: {
38   - drawBar() {
39   - let myChart = echarts.init(document.getElementById('income-echart'));
40   - let option = {
41   - color: ['#f44'],
42   - tooltip : {
43   - trigger: 'axis',
44   - axisPointer : {
45   - type : 'shadow'
46   - }
47   - },
48   - xAxis : [
49   - {
50   - type : 'category',
51   - data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
52   - axisTick: {
53   - alignWithLabel: true
54   - }
55   - }
56   - ],
57   - yAxis : [
58   - {
59   - type : 'value'
60   - }
61   - ],
62   - series : [
63   - {
64   - name:'每月花费',
65   - type:'bar',
66   - barWidth: '60%',
67   - data:[995,666,444,858,654,236,645,546,846,225,547,356]
68   - }
69   - ]
70   - };
71   - myChart.setOption(option);
72 38  
73   - }
74 39 }
75 40 }
76 41 </script>
... ...
src/view/VHome.vue
  View file @ea141a5
... ... @@ -20,7 +20,9 @@
20 20 <div class="frame-wrap">
21 21 <v-income></v-income>
22 22 </div>
23   - <div class="frame-wrap frame-wrap-center"></div>
  23 + <div class="frame-wrap frame-wrap-center">
  24 + <v-berth></v-berth>
  25 + </div>
24 26 <div class="frame-wrap"></div>
25 27 </li>
26 28 </ul>
... ... @@ -34,6 +36,7 @@ import VParking from &#39;../components/VParking&#39;
34 36 import VToll from '../components/VToll'
35 37 import VInout from '../components/VInout'
36 38 import VIncome from '../components/VIncome'
  39 +import VBerth from '../components/VBerth'
37 40 export default {
38 41 name: 'VHome',
39 42 components: {
... ... @@ -42,7 +45,8 @@ export default {
42 45 VParking,
43 46 VToll,
44 47 VInout,
45   - VIncome
  48 + VIncome,
  49 + VBerth
46 50 }
47 51 }
48 52 </script>
... ...