BJ_web_developers / lzsandtable

Commit 32050c6b3dcdab557395ce6ec95007b8dcab7d81

Authored by liuqimichale
1 parent ea141a52

泊位信息

Inline Side-by-side
Showing 3 changed files with 182 additions and 53 deletions
src/components/VBerth.vue
  View file @32050c6
... ... @@ -5,9 +5,12 @@
5 5 <account-num>
6 6 <span>总计</span>
7 7 </account-num>
8   - <div class="income-echart" id="income-echart">
9   - <bar-chart :chart-data="pieChartData"></bar-chart>
10   - </div>
  8 + <ul class="income-echart">
  9 + <li>
  10 + <pie-echart :chart-data="pieChartData"></pie-echart>
  11 + </li>
  12 + <li></li>
  13 + </ul>
11 14 </div>
12 15 </div>
13 16 </template>
... ... @@ -15,13 +18,13 @@
15 18 <script>
16 19 import CardTitle from './base/CardTitle'
17 20 import AccountNum from './base/AccountNum'
18   -import barChart from './base/barChart'
  21 +import PieEchart from './base/PieEchart'
19 22 export default {
20 23 name: 'VBerth',
21 24 components: {
22 25 CardTitle,
23 26 AccountNum,
24   - barChart
  27 + PieEchart
25 28 },
26 29 data() {
27 30 return {
... ... @@ -35,42 +38,7 @@ export default {
35 38 //this.drawBar();
36 39 },
37 40 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 41  
73   - }
74 42 }
75 43 }
76 44 </script>
... ... @@ -85,6 +53,10 @@ export default {
85 53 }
86 54 .income-echart{
87 55 height: 70%;
  56 + display: flex;
  57 + >li{
  58 + flex: 1;
  59 + }
88 60 }
89 61  
90 62 </style>
... ...
src/components/base/BarEcharts.vue deleted
View file @ea141a5
1   -<template>
2   - <div></div>
3   -</template>
4   -
5   -<script>
6   -export default {
7   - name: 'BarEcharts'
8   -}
9   -</script>
10   -
11   -<style scoped>
12   -
13   -</style>
src/components/base/PieEchart.vue 0 → 100644
  View file @32050c6
  1 +<template>
  2 + <div :class="className" :style="{height:height,width:width}"></div>
  3 +</template>
  4 +
  5 +<script>
  6 +import echarts from 'echarts'
  7 +
  8 +require('echarts/theme/macarons') // echarts theme
  9 +import {debounce} from '../../utils/debounce'
  10 +
  11 +export default {
  12 + name: 'PieEchart',
  13 + props: {
  14 + className: {
  15 + type: String,
  16 + default: 'chart'
  17 + },
  18 + width: {
  19 + type: String,
  20 + default: '100%'
  21 + },
  22 + height: {
  23 + type: String,
  24 + default: '100%'
  25 + },
  26 + autoResize: {
  27 + type: Boolean,
  28 + default: true
  29 + },
  30 + chartData: {
  31 + type: Object,
  32 + required: true
  33 + }
  34 + },
  35 + data() {
  36 + return {
  37 + chart: null
  38 + }
  39 + },
  40 + watch: {
  41 + chartData: function () {
  42 + this.$nextTick(()=>{
  43 + this.initChart()
  44 + })
  45 + }
  46 + },
  47 + mounted() {
  48 + this.initChart()
  49 + if (this.autoResize) {
  50 + this.__resizeHandler = debounce(() => {
  51 + if (this.chart) {
  52 + this.chart.resize()
  53 + }
  54 + }, 100)
  55 + window.addEventListener('resize', this.__resizeHandler)
  56 + }
  57 + },
  58 + beforeDestroy() {
  59 + if (!this.chart) {
  60 + return
  61 + }
  62 + if (this.autoResize) {
  63 + window.removeEventListener('resize', this.__resizeHandler)
  64 + }
  65 +
  66 + this.chart.dispose()
  67 + this.chart = null
  68 + },
  69 + methods: {
  70 + setOptions({yData} = {}) {
  71 + this.chart.setOption(
  72 + {
  73 + tooltip: {
  74 + show:false
  75 + },
  76 + series: [
  77 + {
  78 + type: 'pie',
  79 + radius: ['60%', '75%'],
  80 + center: ['50%', '50%'],
  81 + hoverAnimation:false,
  82 + label: {
  83 + show: false
  84 + },
  85 + lableLine: {
  86 + show: false
  87 + },
  88 + data: [
  89 + {
  90 + value: yData[0],
  91 + name: '空余',
  92 + itemStyle: {
  93 + normal: {
  94 + color: {
  95 + colorStops: [{
  96 + offset: 0,
  97 + color: '#00CAFE' // 0% 处的颜色
  98 + }, {
  99 + offset: 1,
  100 + color: '#2772F4' // 100% 处的颜色
  101 + }]
  102 + },
  103 + }
  104 + }
  105 + },
  106 + {
  107 + value: yData[1],
  108 + name: '占有',
  109 +
  110 + itemStyle: {
  111 + normal: {
  112 + color: {
  113 + colorStops: [{
  114 + offset: 0,
  115 + color: '#FFBA00' // 0% 处的颜色
  116 + }, {
  117 + offset: 1,
  118 + color: '#FF8100' // 100% 处的颜色
  119 + }]
  120 + },
  121 + }
  122 + }
  123 + },
  124 +
  125 + ],
  126 + animationType: 'scale',
  127 + animationEasing: 'elasticOut'
  128 + },
  129 + {
  130 + name: '', type: 'pie',
  131 + clockWise: true,hoverAnimation: false,
  132 + radius: ['90%', '90%'],
  133 + label: { normal: { position: 'center' }},
  134 + data: [{
  135 + value: 0,
  136 + label: {
  137 + normal: {
  138 + formatter: '30.5%',//小数点后一位
  139 + textStyle: {
  140 + color: '#fe8b53',
  141 + fontSize: 18,
  142 + fontWeight: 'normal'
  143 + }
  144 + }
  145 + }
  146 + }, {
  147 + tooltip: {show: false},
  148 + label: {
  149 + normal: {
  150 + formatter: '\n占有',
  151 + textStyle: {
  152 + color: '#bbeaf9',fontSize: 12
  153 + }
  154 + }
  155 + }
  156 + }]
  157 + }
  158 +
  159 + ]
  160 + }
  161 + )
  162 + },
  163 + initChart() {
  164 + this.chart = echarts.init(this.$el)
  165 + this.setOptions(this.chartData)
  166 + },
  167 +
  168 + }
  169 +}
  170 +</script>
... ...