Commit 4831b33deba0e637006f75e911c014226ade3409
1 parent
8a59623c
进出场
Showing
3 changed files
with
27 additions
and
28 deletions
src/components/lineChart.vue
| @@ -4,7 +4,6 @@ | @@ -4,7 +4,6 @@ | ||
| 4 | 4 | ||
| 5 | <script> | 5 | <script> |
| 6 | import echarts from 'echarts' | 6 | import echarts from 'echarts' |
| 7 | - | ||
| 8 | import {debounce} from '../utils/debounce' | 7 | import {debounce} from '../utils/debounce' |
| 9 | 8 | ||
| 10 | export default { | 9 | export default { |
| @@ -33,8 +32,7 @@ export default { | @@ -33,8 +32,7 @@ export default { | ||
| 33 | }, | 32 | }, |
| 34 | data() { | 33 | data() { |
| 35 | return { | 34 | return { |
| 36 | - chart: null, | ||
| 37 | - sidebarElm: null | 35 | + chart: null |
| 38 | } | 36 | } |
| 39 | }, | 37 | }, |
| 40 | watch: { | 38 | watch: { |
| @@ -43,6 +41,7 @@ export default { | @@ -43,6 +41,7 @@ export default { | ||
| 43 | } | 41 | } |
| 44 | }, | 42 | }, |
| 45 | mounted() { | 43 | mounted() { |
| 44 | + console.log(this.chartData) | ||
| 46 | this.initChart() | 45 | this.initChart() |
| 47 | if (this.autoResize) { | 46 | if (this.autoResize) { |
| 48 | this.__resizeHandler = debounce(() => { | 47 | this.__resizeHandler = debounce(() => { |
| @@ -65,14 +64,14 @@ export default { | @@ -65,14 +64,14 @@ export default { | ||
| 65 | this.chart = null | 64 | this.chart = null |
| 66 | }, | 65 | }, |
| 67 | methods: { | 66 | methods: { |
| 68 | - setOptions({xData, yData} = {}) { | 67 | + setOptions({xData, yData, legendData} = {}) { |
| 69 | this.chart.setOption({ | 68 | this.chart.setOption({ |
| 70 | tooltip: { | 69 | tooltip: { |
| 71 | trigger: 'axis' | 70 | trigger: 'axis' |
| 72 | }, | 71 | }, |
| 73 | color:['#FFB130','#01AEFE'], | 72 | color:['#FFB130','#01AEFE'], |
| 74 | legend: { | 73 | legend: { |
| 75 | - data:['出场','入场'], | 74 | + data:legendData, |
| 76 | bottom:'2%', | 75 | bottom:'2%', |
| 77 | textStyle: { | 76 | textStyle: { |
| 78 | color: '#59AAF7' | 77 | color: '#59AAF7' |
| @@ -103,7 +102,7 @@ export default { | @@ -103,7 +102,7 @@ export default { | ||
| 103 | splitLine: { | 102 | splitLine: { |
| 104 | show: false | 103 | show: false |
| 105 | }, | 104 | }, |
| 106 | - data: ['周一','周二','周三','周四','周五','周六','周日'] | 105 | + data: xData |
| 107 | }, | 106 | }, |
| 108 | yAxis: { | 107 | yAxis: { |
| 109 | type: 'value', | 108 | type: 'value', |
| @@ -128,17 +127,17 @@ export default { | @@ -128,17 +127,17 @@ export default { | ||
| 128 | }, | 127 | }, |
| 129 | series: [ | 128 | series: [ |
| 130 | { | 129 | { |
| 131 | - name:'出场', | 130 | + name:legendData[0], |
| 132 | type:'line', | 131 | type:'line', |
| 133 | - data:[120, 132, 101, 134, 90, 230, 210], | 132 | + data:yData.indata, |
| 134 | lineStyle: { | 133 | lineStyle: { |
| 135 | color: '#FFB130' | 134 | color: '#FFB130' |
| 136 | } | 135 | } |
| 137 | }, | 136 | }, |
| 138 | { | 137 | { |
| 139 | - name:'入场', | 138 | + name:legendData[1], |
| 140 | type:'line', | 139 | type:'line', |
| 141 | - data:[220, 182, 191, 234, 290, 330, 310], | 140 | + data:yData.outdata, |
| 142 | lineStyle: { | 141 | lineStyle: { |
| 143 | color: '#08B9FC' | 142 | color: '#08B9FC' |
| 144 | } | 143 | } |
src/views/outsection.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <titlesection title="周出场统计"></titlesection> | 3 | <titlesection title="周出场统计"></titlesection> |
| 4 | - <lineChart class="flexfm inout-wrap"> | 4 | + <lineChart :chart-data="lineChartData" class="flexfm inout-wrap" > |
| 5 | </lineChart> | 5 | </lineChart> |
| 6 | </div> | 6 | </div> |
| 7 | </template> | 7 | </template> |
| @@ -11,14 +11,6 @@ import titlesection from '../components/titlesection' | @@ -11,14 +11,6 @@ import titlesection from '../components/titlesection' | ||
| 11 | import {fetchList} from '../api/api' | 11 | import {fetchList} from '../api/api' |
| 12 | import lineChart from '../components/lineChart' | 12 | import lineChart from '../components/lineChart' |
| 13 | 13 | ||
| 14 | -const lineChartData = { | ||
| 15 | - newVisitis: { | ||
| 16 | - yData: [100, 120, 161], | ||
| 17 | - xData: ['正常', '异常', '故障'] | ||
| 18 | - } | ||
| 19 | -} | ||
| 20 | - | ||
| 21 | - | ||
| 22 | export default { | 14 | export default { |
| 23 | name: 'outsection', | 15 | name: 'outsection', |
| 24 | components: { | 16 | components: { |
| @@ -27,7 +19,14 @@ export default { | @@ -27,7 +19,14 @@ export default { | ||
| 27 | }, | 19 | }, |
| 28 | data() { | 20 | data() { |
| 29 | return { | 21 | return { |
| 30 | - lineChartData: lineChartData.newVisitis, | 22 | + lineChartData: { |
| 23 | + xData: ['周一','周二','周三','周四','周五','周六','周日'], | ||
| 24 | + yData: { | ||
| 25 | + indata:[120, 132, 101, 134, 90, 230, 210], | ||
| 26 | + outdata:[220, 182, 191, 234, 290, 330, 310], | ||
| 27 | + }, | ||
| 28 | + legendData: ['出场','进场'] | ||
| 29 | + }, | ||
| 31 | dzNum: '23454', | 30 | dzNum: '23454', |
| 32 | ydpNum: '4454' | 31 | ydpNum: '4454' |
| 33 | } | 32 | } |
src/views/vehiclesection.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <titlesection title="今日车流量"></titlesection> | 3 | <titlesection title="今日车流量"></titlesection> |
| 4 | - <lineChart class="flexfm inout-wrap"> | 4 | + <lineChart :chart-data="lineChartData" class="flexfm inout-wrap" > |
| 5 | </lineChart> | 5 | </lineChart> |
| 6 | </div> | 6 | </div> |
| 7 | </template> | 7 | </template> |
| @@ -11,12 +11,6 @@ import titlesection from '../components/titlesection' | @@ -11,12 +11,6 @@ import titlesection from '../components/titlesection' | ||
| 11 | import {fetchList} from '../api/api' | 11 | import {fetchList} from '../api/api' |
| 12 | import lineChart from '../components/lineChart' | 12 | import lineChart from '../components/lineChart' |
| 13 | 13 | ||
| 14 | -const lineChartData = { | ||
| 15 | - newVisitis: { | ||
| 16 | - yData: [100, 120, 161], | ||
| 17 | - xData: ['正常', '异常', '故障'] | ||
| 18 | - } | ||
| 19 | -} | ||
| 20 | 14 | ||
| 21 | 15 | ||
| 22 | export default { | 16 | export default { |
| @@ -27,7 +21,14 @@ export default { | @@ -27,7 +21,14 @@ export default { | ||
| 27 | }, | 21 | }, |
| 28 | data() { | 22 | data() { |
| 29 | return { | 23 | return { |
| 30 | - lineChartData: lineChartData.newVisitis, | 24 | + lineChartData: { |
| 25 | + xData: ['周一','周二','周三','周四','周五','周六','周日'], | ||
| 26 | + yData: { | ||
| 27 | + indata:[120, 132, 101, 134, 90, 230, 210], | ||
| 28 | + outdata:[220, 182, 191, 234, 290, 330, 310], | ||
| 29 | + }, | ||
| 30 | + legendData: ['出场1','进场'] | ||
| 31 | + }, | ||
| 31 | dzNum: '23454', | 32 | dzNum: '23454', |
| 32 | ydpNum: '4454' | 33 | ydpNum: '4454' |
| 33 | } | 34 | } |