Commit 8a59623c98ecaff254608a400b086277139d56c0
1 parent
5fed471f
进出场
Showing
3 changed files
with
56 additions
and
37 deletions
src/components/lineChart.vue
| @@ -5,7 +5,6 @@ | @@ -5,7 +5,6 @@ | ||
| 5 | <script> | 5 | <script> |
| 6 | import echarts from 'echarts' | 6 | import echarts from 'echarts' |
| 7 | 7 | ||
| 8 | -require('echarts/theme/macarons') // echarts theme | ||
| 9 | import {debounce} from '../utils/debounce' | 8 | import {debounce} from '../utils/debounce' |
| 10 | 9 | ||
| 11 | export default { | 10 | export default { |
| @@ -21,7 +20,7 @@ export default { | @@ -21,7 +20,7 @@ export default { | ||
| 21 | }, | 20 | }, |
| 22 | height: { | 21 | height: { |
| 23 | type: String, | 22 | type: String, |
| 24 | - default: '205px' | 23 | + default: '100%' |
| 25 | }, | 24 | }, |
| 26 | autoResize: { | 25 | autoResize: { |
| 27 | type: Boolean, | 26 | type: Boolean, |
| @@ -71,61 +70,85 @@ export default { | @@ -71,61 +70,85 @@ export default { | ||
| 71 | tooltip: { | 70 | tooltip: { |
| 72 | trigger: 'axis' | 71 | trigger: 'axis' |
| 73 | }, | 72 | }, |
| 73 | + color:['#FFB130','#01AEFE'], | ||
| 74 | legend: { | 74 | legend: { |
| 75 | - data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] | 75 | + data:['出场','入场'], |
| 76 | + bottom:'2%', | ||
| 77 | + textStyle: { | ||
| 78 | + color: '#59AAF7' | ||
| 79 | + } | ||
| 76 | }, | 80 | }, |
| 77 | grid: { | 81 | grid: { |
| 82 | + top:'8%', | ||
| 78 | left: '3%', | 83 | left: '3%', |
| 79 | right: '4%', | 84 | right: '4%', |
| 80 | - bottom: '3%', | 85 | + bottom: '14%', |
| 81 | containLabel: true | 86 | containLabel: true |
| 82 | }, | 87 | }, |
| 83 | 88 | ||
| 84 | xAxis: { | 89 | xAxis: { |
| 85 | - type: 'category', | ||
| 86 | - boundaryGap: false, | 90 | + axisLabel : { |
| 91 | + textStyle: { | ||
| 92 | + color: '#fff' | ||
| 93 | + } | ||
| 94 | + }, | ||
| 95 | + axisLine:{ | ||
| 96 | + lineStyle:{ | ||
| 97 | + color:'rgba(89,170,247,.3)' | ||
| 98 | + } | ||
| 99 | + }, | ||
| 100 | + axisTick: { | ||
| 101 | + show: false | ||
| 102 | + }, | ||
| 103 | + splitLine: { | ||
| 104 | + show: false | ||
| 105 | + }, | ||
| 87 | data: ['周一','周二','周三','周四','周五','周六','周日'] | 106 | data: ['周一','周二','周三','周四','周五','周六','周日'] |
| 88 | }, | 107 | }, |
| 89 | yAxis: { | 108 | yAxis: { |
| 90 | - type: 'value' | ||
| 91 | - }, | ||
| 92 | - series: [ | ||
| 93 | - { | ||
| 94 | - name:'邮件营销', | ||
| 95 | - type:'line', | ||
| 96 | - stack: '总量', | ||
| 97 | - data:[120, 132, 101, 134, 90, 230, 210] | 109 | + type: 'value', |
| 110 | + axisLabel : { | ||
| 111 | + formatter: '{value}', | ||
| 112 | + textStyle: { | ||
| 113 | + color: '#fff' | ||
| 114 | + } | ||
| 98 | }, | 115 | }, |
| 99 | - { | ||
| 100 | - name:'联盟广告', | ||
| 101 | - type:'line', | ||
| 102 | - stack: '总量', | ||
| 103 | - data:[220, 182, 191, 234, 290, 330, 310] | 116 | + axisLine:{ |
| 117 | + lineStyle:{ | ||
| 118 | + color:'rgba(89,170,247,.3)' | ||
| 119 | + } | ||
| 104 | }, | 120 | }, |
| 105 | - { | ||
| 106 | - name:'视频广告', | ||
| 107 | - type:'line', | ||
| 108 | - stack: '总量', | ||
| 109 | - data:[150, 232, 201, 154, 190, 330, 410] | 121 | + axisTick: { |
| 122 | + show: false | ||
| 123 | + }, | ||
| 124 | + splitLine: { | ||
| 125 | + show: false | ||
| 110 | }, | 126 | }, |
| 127 | + splitNumber:3 | ||
| 128 | + }, | ||
| 129 | + series: [ | ||
| 111 | { | 130 | { |
| 112 | - name:'直接访问', | 131 | + name:'出场', |
| 113 | type:'line', | 132 | type:'line', |
| 114 | - stack: '总量', | ||
| 115 | - data:[320, 332, 301, 334, 390, 330, 320] | 133 | + data:[120, 132, 101, 134, 90, 230, 210], |
| 134 | + lineStyle: { | ||
| 135 | + color: '#FFB130' | ||
| 136 | + } | ||
| 116 | }, | 137 | }, |
| 117 | { | 138 | { |
| 118 | - name:'搜索引擎', | 139 | + name:'入场', |
| 119 | type:'line', | 140 | type:'line', |
| 120 | - stack: '总量', | ||
| 121 | - data:[820, 932, 901, 934, 1290, 1330, 1320] | 141 | + data:[220, 182, 191, 234, 290, 330, 310], |
| 142 | + lineStyle: { | ||
| 143 | + color: '#08B9FC' | ||
| 144 | + } | ||
| 122 | } | 145 | } |
| 123 | ] | 146 | ] |
| 124 | 147 | ||
| 125 | }) | 148 | }) |
| 126 | }, | 149 | }, |
| 127 | initChart() { | 150 | initChart() { |
| 128 | - this.chart = echarts.init(this.$el, 'macarons') | 151 | + this.chart = echarts.init(this.$el) |
| 129 | this.setOptions(this.chartData) | 152 | this.setOptions(this.chartData) |
| 130 | } | 153 | } |
| 131 | } | 154 | } |
src/views/mainContainer.vue
| @@ -9,8 +9,8 @@ | @@ -9,8 +9,8 @@ | ||
| 9 | <li class="margin0-12"> | 9 | <li class="margin0-12"> |
| 10 | <div class="heightper-top"></div> | 10 | <div class="heightper-top"></div> |
| 11 | <div class="heightper-bottom"> | 11 | <div class="heightper-bottom"> |
| 12 | - <outsection style="width: 50%;float: left"></outsection> | ||
| 13 | - <vehiclesection style="width: 50%;float: left"></vehiclesection> | 12 | + <outsection style="width: 50%;float: left;height: 100%;display: flex;flex-direction: column"></outsection> |
| 13 | + <vehiclesection style="width: 50%;float: left;height: 100%;display: flex;flex-direction: column"></vehiclesection> | ||
| 14 | </div> | 14 | </div> |
| 15 | </li> | 15 | </li> |
| 16 | <li> | 16 | <li> |