|
|
@@ -16,44 +16,77 @@ const option1 = {
|
|
|
width: '74%',
|
|
|
y: '-7%',
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- offset: 5,
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ offset: 5,
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ onZero: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#E9F0FE',
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel:{textStyle: { fontSize: 8, color: '#95A8CB' }},
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
- onZero: false,
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#E9F0FE',
|
|
|
- width: 2
|
|
|
- },
|
|
|
+ type: 'dashed',
|
|
|
+ color: '#41bc95',
|
|
|
+ opacity: 0.37
|
|
|
+ }
|
|
|
},
|
|
|
- axisLabel:{textStyle: { fontSize: 8, color: '#95A8CB' }},
|
|
|
- type: 'category',
|
|
|
- data: [],
|
|
|
+ min: 0,
|
|
|
+ splitNumber: 3
|
|
|
},
|
|
|
- yAxis: {
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
- show: false,
|
|
|
+ show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- show: false,
|
|
|
+ show: true,
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
- color: '#95A8CB',
|
|
|
+ color: '#41bc95',
|
|
|
opacity: 0.37
|
|
|
}
|
|
|
},
|
|
|
min: 0,
|
|
|
splitNumber: 3
|
|
|
},
|
|
|
+],
|
|
|
series: [
|
|
|
{
|
|
|
+ name: '销售毛利',
|
|
|
+ barMinHeight:5,
|
|
|
+ barWidth: '20px',
|
|
|
+ data: [],
|
|
|
+ type: 'bar'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '销售毛利率',
|
|
|
barMinHeight:5,
|
|
|
barWidth: '20px',
|
|
|
data: [],
|
|
|
@@ -307,7 +340,7 @@ const option3 = {
|
|
|
{
|
|
|
showBackground: true,
|
|
|
backgroundStyle: {
|
|
|
- color: '#F8F9FD',
|
|
|
+ color: '#85a0f8',
|
|
|
barBorderRadius: 6,
|
|
|
},
|
|
|
barWidth: '6px',
|
|
|
@@ -341,26 +374,119 @@ const getWAmount = (number)=>{
|
|
|
|
|
|
const getOpData = (data,labelKey,valueKey,optionType)=>{
|
|
|
let options;
|
|
|
+
|
|
|
+ //简化为万元 改为10000 不简化为1
|
|
|
+ let divisor = 1
|
|
|
+
|
|
|
/* 1:正常的纵向 2:横向标题在左 3:横向标题在上*/
|
|
|
if(optionType === 1){
|
|
|
- options = {...option1}
|
|
|
- options.xAxis.data = data.map(it=>it[labelKey].length>2?(it[labelKey].substring(0,2)+'\n'+it[labelKey].substring(2,4)):it[labelKey])
|
|
|
- options.series[0].data = data.map((it,index)=>{return {value:getWAmount(it[valueKey]/10000),itemStyle: {color: option1BarColor[index],barBorderRadius: 1}}})
|
|
|
+ // options = {...option1}
|
|
|
+ options = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '15%',
|
|
|
+ width: '70%',
|
|
|
+ // y: '-7%',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['销售毛利', '销售毛利率'],
|
|
|
+ left: '0%',
|
|
|
+ // top: '1%'
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '销售毛利',
|
|
|
+
|
|
|
+ // interval: 50,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '¥{value}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '销售毛利率',
|
|
|
+ // min: 0,
|
|
|
+ // max: 100,
|
|
|
+ // min: 0,
|
|
|
+ // max: 25,
|
|
|
+ // interval: 5,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '销售毛利',
|
|
|
+ type: 'bar',
|
|
|
+ color: '#41be92',
|
|
|
+ tooltip: {
|
|
|
+ // valueFormatter: function (value) {
|
|
|
+ // return value + ' ml';
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '销售毛利率',
|
|
|
+ type: 'line',
|
|
|
+ color: '#efc25b',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ // valueFormatter: function (value) {
|
|
|
+ // return value + ' ml';
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // options.xAxis.data = data.map(it=>it[labelKey].length>2?(it[labelKey].substring(0,2)+'\n'+it[labelKey].substring(2,4)):it[labelKey])
|
|
|
+ options.xAxis[0].data = data.map(it=>it[labelKey])
|
|
|
+ // options.yAxis[0].data = data.map(it=>getWAmount(it[valueKey]/divisor))
|
|
|
+ // options.yAxis[1].data = data.map(it=>it.profitRate)
|
|
|
|
|
|
+ // options.yAxis[0].data = data.map(it=>getWAmount(it[valueKey]/divisor))
|
|
|
+ // options.series[0].data = data.map((it,index)=>{return {value:getWAmount(it.profit/divisor),itemStyle: {color: option1BarColor[index],barBorderRadius: 1}}})
|
|
|
+ options.series[0].data = data.map(it=>it.profit)
|
|
|
+ options.series[1].data = data.map(it=>it.profitRate)
|
|
|
+console.log('options',options)
|
|
|
return options;
|
|
|
}
|
|
|
if(optionType === 2){
|
|
|
options = {...option2} /** 业务员姓名太长 type2也用type3的展现形式 单独换下颜色*/
|
|
|
options.yAxis[0].data = data.map(it=>it[labelKey])
|
|
|
- options.yAxis[1].data = data.map(it=>getWAmount(it[valueKey]/10000))
|
|
|
- options.series[0].data = data.map(it=>getWAmount(it[valueKey]/10000))
|
|
|
+ options.yAxis[1].data = data.map(it=>getWAmount(it[valueKey]/divisor))
|
|
|
+ options.series[0].data = data.map(it=>getWAmount(it[valueKey]/divisor))
|
|
|
return options
|
|
|
}
|
|
|
if(optionType === 3){
|
|
|
options = {...option3}
|
|
|
options.yAxis[0].data = data.map(it=>it[labelKey])
|
|
|
- options.yAxis[1].data = data.map(it=>getWAmount(it[valueKey]/10000))
|
|
|
- options.series[0].data = data.map(it=>getWAmount(it[valueKey]/10000))
|
|
|
+ options.yAxis[1].data = data.map(it=>getWAmount(it[valueKey]/divisor))
|
|
|
+ options.series[0].data = data.map(it=>getWAmount(it[valueKey]/divisor))
|
|
|
return options
|
|
|
}
|
|
|
}
|