Skip to content

M
Muse
Commit 67247df6 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

销售统计

parent 2c383fd7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 249 deletions
src/components/viitto/lineChart.vue
View file @ 67247df6
......@@ -112,22 +112,22 @@ export default {
},
grid: [{
left: 80,
left: 40,
right: 10,
top: '5%',
height: '16%'
}, {
left: 80,
left: 40,
right: 10,
top: '28%',
height: '16%'
}, {
left: 80,
left: 40,
right: 10,
top: '51%',
height: '16%'
}, {
left: 80,
left: 40,
right: 10,
top: '74%',
height: '16%'
......
src/components/viitto/lineChart2.vue
View file @ 67247df6
......@@ -112,27 +112,27 @@ export default {
},
grid: [{
left: 80,
left: 40,
right: 10,
top: '40px',
height: '150px'
}, {
left: 80,
left: 40,
right: 10,
top: '250px',
height: '150px'
}, {
left: 80,
left: 40,
right: 10,
top: '460px',
height: '150px'
}, {
left: 80,
left: 40,
right: 10,
top: '670px',
height: '150px'
}, {
left: 80,
left: 40,
right: 10,
top: '880px',
height: '150px'
......
src/components/viitto/lineChartK.vue
View file @ 67247df6
......@@ -123,11 +123,9 @@ export default {
formatter: function (params) {
if (typeof(params[0].value) !== "object") {// 防止放上去提示undefined
var res = "成交单价"
res += '<br/> 5日平均: ' + params[0].value
res += '<br/> 10日平均: ' + params[1].value
res += '<br/> 30日平均: ' + params[2].value
res += '<br/> 90日平均: ' + params[3].value
res += '<br/> 180日平均: ' + params[4].value
for(let i = 0; i < params.length; i ++) {
res += '<br/> '+ params[i].seriesName +': ' + params[i].value
}
// res += '<br/> 点击: ' + params[5].value
return res
} else {
......
src/components/viitto/saleDataLook.vue
View file @ 67247df6
This diff is collapsed.
src/components/viitto/saleLineChart.vue
View file @ 67247df6
......@@ -35,12 +35,12 @@
<script>
export default {
props:[
'preferpriceList',
'guestnumList',
'clickcountList',
'ordercountList',
'unitpriceList',
'day_total_guestprice',
'Development',
'Appointment',
'Demand',
'SolveDemand',
'Clinch',
'Service',
'dateList',
'zoom'
],
......@@ -52,6 +52,20 @@ export default {
},mounted() {
this.init()
},methods:{
getDataList(list){
let arr = []
list.map(x=>{
arr.push(x.val)
})
return arr
},
getDateList(list){
let arr = []
list.map(x=>{
arr.push(x.key)
})
return arr
},
init() {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = [];
......@@ -201,7 +215,7 @@ export default {
yAxis : [
{
gridIndex: 0,
name : '名单开发 ￥'+ _this.day_total_guestprice.PreferPrice +'元',
name : '名单开发',
type : 'value',
inverse: false,
splitLine: {
......@@ -221,7 +235,7 @@ export default {
},
{
gridIndex: 1,
name : '约访 '+ _this.day_total_guestprice.OrderCount,
name : '约访',
type : 'value',
inverse: false,
splitLine: {
......@@ -241,7 +255,7 @@ export default {
},
{
gridIndex: 2,
name : '探寻需求 '+ _this.day_total_guestprice.GuestNum,
name : '探寻需求',
type : 'value',
inverse: false,
splitLine: {
......@@ -261,7 +275,7 @@ export default {
},
{
gridIndex: 3,
name : '解决需求 '+ _this.day_total_guestprice.GuestNum,
name : '解决需求',
type : 'value',
inverse: false,
splitLine: {
......@@ -281,7 +295,7 @@ export default {
},
{
gridIndex: 4,
name : '说明成交 '+ _this.day_total_guestprice.GuestNum,
name : '说明成交',
type : 'value',
inverse: false,
splitLine: {
......@@ -301,7 +315,7 @@ export default {
},
{
gridIndex: 5,
name : '售后服务 '+ _this.day_total_guestprice.ClickCount,
name : '售后服务',
type : 'value',
inverse: false,
splitLine: {
......@@ -322,7 +336,7 @@ export default {
],
series : [
{
name:'明单开发',
name:'名单开发',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
......@@ -330,7 +344,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.preferpriceList,
data: _this.Development,
itemStyle: {
borderWidth: 2,
color: '#F5AF19',
......@@ -362,7 +376,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.ordercountList,
data: _this.Appointment,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
......@@ -394,7 +408,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
data: _this.Demand,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
......@@ -425,7 +439,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
data: _this.SolveDemand,
itemStyle: {
borderWidth: 2,
color: 'rgb(103, 230, 220)',
......@@ -456,7 +470,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
data: _this.Clinch,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
......@@ -487,7 +501,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.clickcountList,
data: _this.Service,
itemStyle: {
borderWidth: 2,
color: '#EE4454',
......
src/components/viitto/saleLineChartK.vue 0 → 100644
View file @ 67247df6
<style>
@font-face {
font-family: "PINGFANG EXTRALIGHT";
src:url("../../assets/fonts/PINGFANG EXTRALIGHT.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "PINGFANG REGULAR";
src:url("../../assets/fonts/PINGFANG REGULAR.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "MADA-MEDIUM";
src:url("../../assets/fonts/MADA-MEDIUM.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
.PINGFANG{
font-family: "PINGFANG REGULAR";
}
.myecharts{
height: 100%;
}
</style>
<template>
<div class="myecharts" ref="myecharts" >
</div>
</template>
<script>
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
result.push(data[i].value[dayCount]);
}
return result;
}
export default {
props:[
'zoom',
'rightShow',
'DaysKData'
],
data(){
return {
myChart: null,
dataList: [],
dates: []
}
},watch:{
},created(){
},mounted() {
let data = this.DaysKData.map(function (item) {
return [
+item.BeginPrice,
+item.EndPrice,
+item.MinPrice,
+item.MaxPrice,
+item.Orders,
+item.AvgPrice,
];
});
var dates = this.DaysKData.map(function (item) {
return item.Day;
});
let dataList = []
for(let i = 0; i < data.length; i++) {
let obj = {
value: data[i],
// itemStyle: {
// normal: {
// color: i > data.length - 4 ? 'rgba(0, 0, 0, 0)' : '#D53C34',
// color0: i > data.length - 4 ? 'rgba(0, 0, 0, 0)' : '#43E9F3',
// borderColor: i > data.length - 4 ? '#6A6F81' : '#D53C34',
// borderColor0: i > data.length - 4 ? '#6A6F81' : '#43E9F3'
// }
// }
}
dataList.push(obj)
}
this.dataList = dataList
this.dates = dates
this.myChart = this.$echarts.init(this.$refs.myecharts);
this.init()
},methods:{
resize(){
this.myChart.resize()
},
init() {
// , '月均线', '季度均线', '黄金线'
var dataAxis = [];
let _this = this;
let option = {
backgroundColor: '#21202D',
color:['#2ecc71','#3498db','#9b59b6','#f1c40f','#e74c3c','#fffa65'],
legend: {
data: ['成交单价', '订单数', '平均价格'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
},
left: 100,
top: 10,
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
},
formatter: function (params) {
if (typeof(params[0].value) !== "object") {// 防止放上去提示undefined
var res = "成交单价"
for(let i = 0; i < params.length; i ++) {
res += '<br/> '+ params[i].seriesName +': ' + params[i].value
}
// res += '<br/> 点击: ' + params[5].value
return res
} else {
var res = "成交单价"
res += '<br/> 开始值: ' + params[0].value[1]
res += '<br/> 结束值: ' + params[0].value[2]
res += '<br/> 最低值: ' + params[0].value[3]
res += '<br/> 最高值: ' + params[0].value[4]
res += '<br/> 订单数: ' + params[0].value[5]
res += '<br/> 平均价格: ' + params[0].value[6]
return res
}
},
},
xAxis: {
type: 'category',
data: _this.dates,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#4a4a4a'
}
}
},
yAxis: [{
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#4a4a4a'
}
}
},
{
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#4a4a4a'
}
}
},
],
grid: [
{
bottom: 80,
left: 70,
right: 70,
},
],
dataZoom: [{
textStyle: {
color: '#8392A5'
},
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside',
}],
animation: false,
series: [
{
type: 'candlestick',
name: '成交单价',
data: _this.dataList,
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
},
{
name: '订单数',
type: 'line',
yAxisIndex: 1,
data: calculateMA(4, _this.dataList),
smooth: true,
showSymbol: false,
z: 3,
lineStyle: {
width: 1,
}
},
{
name: '平均价格',
type: 'line',
yAxisIndex: 0,
data: calculateMA(5, _this.dataList),
smooth: true,
showSymbol: false,
z: 3,
lineStyle: {
width: 1,
}
},
]
}
_this.myChart.setOption(option);
},
}
}
</script>
\ No newline at end of file
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