Skip to content

B
bms-vue-obear
Commit 67581f5c authored by daywrite's avatar daywrite
Browse files
Options

图表利润贡献

parent 9a98f2c8
Show whitespace changes
Inline Side-by-side
Showing with 131 additions and 156 deletions
index.ejs
View file @ 67581f5c
......@@ -11,8 +11,10 @@
<script src="./static/vupVueSdk.js"></script>
<link rel="stylesheet" href="./static/vupVueSdk.css">
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/solid-gauge.js"></script>
<!-- <script src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script> -->
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/drilldown.js">
// <script src="https://code.highcharts.com.cn/highcharts/modules/solid-gauge.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
(function (){
......
src/api.js
View file @ 67581f5c
......@@ -9,6 +9,7 @@ import ProfileApi from './apis/profile.js'
import ServiceApi from './apis/service.js'
import PunchApi from './apis/punch.js'
import SettingApi from './apis/setting.js'
import AnalysisApi from './apis/analysis.js'
const API_HOST = process.env.API_HOST
const API_PORT = process.env.API_PORT
......@@ -44,6 +45,7 @@ apis = Object.assign(apis, ProfileApi)
apis = Object.assign(apis, ServiceApi)
apis = Object.assign(apis, PunchApi)
apis = Object.assign(apis, SettingApi)
apis = Object.assign(apis, AnalysisApi)
export default {
option,
......
src/apis/analysis.js 0 → 100644
View file @ 67581f5c
export default {
getSalesChart: {
url: '/vue/analysis/get-sales-chart'
}
}
src/components/analysis/analysis/analysisHome.vue
View file @ 67581f5c
......@@ -76,6 +76,7 @@ import SearchForm from '../../common/SearchForm'
import countArr from './countArr'
import TimeSearchForm from './timeSearchForm'
import singleRadioTool from '../../common/singleRadioTool'
import individualContributions from './individualContributions.js'
import {
requestAPI,
api
......@@ -83,6 +84,8 @@ import {
export default {
name: 'caseHome',
mixins: [individualContributions],
components: {
SearchHeader,
SearchForm,
......@@ -99,62 +102,7 @@ export default {
type: 'all',
navArray: [],
result: {
countList: [{
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}, {
key: 1,
name: 1,
value: 1,
bgcolor: 'red'
}]
countList: []
}
}
},
......@@ -166,14 +114,21 @@ export default {
methods: {
init () {
this.getFilter()
this.getSalesChart()
// 利润图表
this.c1()
this.c31()
this.c32()
this.c33()
this.c34()
},
getSalesChart () {
requestAPI(api.getSalesChart, {})
.then(res => {
this.result.countList = res.counts
this.c1(res.chars['individualContributions'])
})
},
/* eslint-disable */
c34 () {
Highcharts.chart('c3-4', {
......@@ -442,102 +397,8 @@ export default {
data: [3, 4]
}]
});
},
c1 () {
Highcharts.chart('c1', {
chart: {
type: 'column'
},
title: {
text: '2015年1月-5月，各浏览器的市场份额'
},
subtitle: {
text: '点击可查看具体的版本数据，数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function () {
return (this.value / 10000) + '万'
},
},
plotLines:[{
color:'red',
dashStyle:'solid',
value: 100000,
label: '100000',
width:2
}]
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: '浏览器品牌',
colorByPoint: true,
data: [{
name: '刘人诚',
y: 1997600,
drilldown: '刘人诚'
}, {
name: '刘曦林',
y: 50000,
drilldown: '刘曦林'
}, {
name: '六老五',
y: 0,
drilldown: '六老五'
}]
}],
drilldown: {
series: [{
name: '刘人诚',
id: '刘人诚',
data: [
[
'上海契佳经贸发展有限公司',
1997600
]
]
}, {
name: '刘曦林',
id: '刘曦林',
data: [
[
'北京首东物业管理有限公司(首东国际投资有限公司)',
50000
]
]
}, {
name: '六老五',
id: '六老五',
data: [
[
'刘老五',
0
]
]
}]
}
});
// }
},
// 1.查询条件
......
src/components/analysis/analysis/countArr.vue
View file @ 67581f5c
......@@ -5,7 +5,7 @@
<div class="obear-countArr-option" :style="{'background-color': item.color}">
<span class="obear-countArr-option__label">{{ item.name }}</span>
<span class="obear-countArr-option__number">{{ item.value }}</span>
<span class="obear-countArr-option__unit">天</span>
<span class="obear-countArr-option__unit">{{ item.unit }}</span>
</div>
</div>
</div>
......
src/components/analysis/analysis/individualContributions.js 0 → 100644
View file @ 67581f5c
export default {
methods: {
/* eslint-disable */
c1 (data) {
let _data = data.values
Highcharts.chart('c1', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'category',
gridLineWidth: 1
},
yAxis: {
title: {
text: ''
},
gridLineWidth: 1,
labels: {
formatter: function () {
return (this.value / 10000) + '万'
},
},
plotLines:[{
color:'red',
dashStyle:'solid',
value: _data.average,
label: _data.average + '',
width:2
}]
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:12px">业绩分析</span><br>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b><br/>'
},
series: [{
colorByPoint: true,
data: _data.series_data
// data: [{
// name: '刘人诚',
// y: 1997600,
// drilldown: '刘人诚'
// }, {
// name: '刘曦林',
// y: 50000,
// drilldown: '刘曦林'
// }, {
// name: '六老五',
// y: 0,
// drilldown: '六老五'
// }]
}],
drilldown: {
series: _data.drilldown_series
// series: [{
// name: '刘人诚',
// id: '刘人诚',
// data: [
// [
// '上海契佳经贸发展有限公司',
// 1997600
// ]
// ]
// }, {
// name: '刘曦林',
// id: '刘曦林',
// data: [
// [
// '北京首东物业管理有限公司(首东国际投资有限公司)',
// 50000
// ]
// ]
// }, {
// name: '六老五',
// id: '六老五',
// data: [
// [
// '刘老五',
// 0
// ]
// ]
// }]
}
});
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment