|
@@ -80,52 +80,17 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
init (xData, yData, yData2) {
|
|
|
+ const colorList = ['#ffaa00', '#34c2ff', '#fe9a8b', '#F56948', '#9E87FF']
|
|
|
this.option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: xData,
|
|
|
- boundaryGap: false, // 不留白,从原点开始
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(31,99,163,.2)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- // show:false,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(31,99,163,.1)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: '#7EB7FD',
|
|
|
- fontWeight: '500'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(31,99,163,.2)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(31,99,163,.1)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: '#7EB7FD',
|
|
|
- fontWeight: '500'
|
|
|
- }
|
|
|
- },
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
backgroundColor: 'rgba(0,0,0,.6)',
|
|
|
borderColor: 'rgba(147, 235, 248, .8)',
|
|
|
textStyle: {
|
|
|
color: '#FFF'
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return params[0].seriesName + ': ' + (params[0].value / 10000).toFixed(2) + '万元' + '<br>' + params[1].seriesName + ': ' + params[1].value
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
@@ -133,76 +98,149 @@ export default {
|
|
|
top: '0',
|
|
|
left: 'center',
|
|
|
textStyle: {
|
|
|
- color: '#7EB7FD'
|
|
|
+ color: '#eee'
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
// 布局
|
|
|
show: true,
|
|
|
- left: '10px',
|
|
|
- right: '30px',
|
|
|
- bottom: '10px',
|
|
|
- top: '28px',
|
|
|
+ left: '5px',
|
|
|
+ right: '5px',
|
|
|
+ bottom: '5px',
|
|
|
+ top: '35px',
|
|
|
containLabel: true,
|
|
|
- borderColor: '#1F63A3'
|
|
|
+ borderColor: 'rgba(31,99,163,.1)'
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ data: xData,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(31,99,163,1)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#eee',
|
|
|
+ fontWeight: '500'
|
|
|
+ },
|
|
|
+ // 默认x轴字体大小
|
|
|
+ fontSize: 12,
|
|
|
+ // margin:文字到x轴的距离
|
|
|
+ margin: 15
|
|
|
+ },
|
|
|
+ boundaryGap: false
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ name: '销售金额',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: colorList[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: colorList[0],
|
|
|
+ fontWeight: '500',
|
|
|
+ formatter: function (value) {
|
|
|
+ return (value / 10000) + '万'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ type: 'value',
|
|
|
+ position: 'right',
|
|
|
+ name: '销售数量',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: colorList[1],
|
|
|
+ fontWeight: '500',
|
|
|
+ formatter: '{value}'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: colorList[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '销售金额',
|
|
|
+ type: 'line',
|
|
|
+ data: yData,
|
|
|
+ symbolSize: 1,
|
|
|
+ symbol: 'circle',
|
|
|
+ smooth: true,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: new graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: colorList[0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: colorList[0]
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ shadowColor: 'rgba(158,135,255, 0.3)',
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetY: 20
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: colorList[0],
|
|
|
+ borderColor: colorList[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: yData,
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'none', // 去除点
|
|
|
- name: '销售金额',
|
|
|
- color: 'rgba(252,144,16,.7)',
|
|
|
- areaStyle: {
|
|
|
- // 右,下,左,上
|
|
|
- color: new graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1,
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(252,144,16,.7)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(252,144,16,.0)'
|
|
|
- }
|
|
|
- ],
|
|
|
- false
|
|
|
- )
|
|
|
+ {
|
|
|
+ name: '销售数量',
|
|
|
+ type: 'line',
|
|
|
+ data: yData2,
|
|
|
+ symbolSize: 1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ symbol: 'circle',
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: new graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: colorList[1]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: colorList[1]
|
|
|
}
|
|
|
+ ]),
|
|
|
+ shadowColor: 'rgba(254,154,139, 0.3)',
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetY: 20
|
|
|
},
|
|
|
- {
|
|
|
- data: yData2,
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'none', // 去除点
|
|
|
- name: '销售数量',
|
|
|
- color: 'rgba(9,202,243,.7)',
|
|
|
- areaStyle: {
|
|
|
- // 右,下,左,上
|
|
|
- color: new graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1,
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(9,202,243,.7)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(9,202,243,.0)'
|
|
|
- }
|
|
|
- ],
|
|
|
- false
|
|
|
- )
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: colorList[1],
|
|
|
+ borderColor: colorList[1]
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
]
|
|
|
}
|
|
|
}
|