|
@@ -223,8 +223,17 @@ const initLineChart = (dataList: Array<any>) => {
|
|
|
x: 'left',
|
|
x: 'left',
|
|
|
textStyle: {fontSize: '15', color: state.charts.color},
|
|
textStyle: {fontSize: '15', color: state.charts.color},
|
|
|
},
|
|
},
|
|
|
- grid: {top: 70, right: 0, bottom: 30, left: 50},
|
|
|
|
|
- tooltip: {trigger: 'axis'},
|
|
|
|
|
|
|
+ grid: {top: 70, right: 80, bottom: 30, left: 50},
|
|
|
|
|
+ tooltip: {
|
|
|
|
|
+ trigger: 'axis',
|
|
|
|
|
+ formatter: (params: any) => {
|
|
|
|
|
+ const bar = params.find((p: any) => p.seriesName === '洗车量');
|
|
|
|
|
+ const line = params.find((p: any) => p.seriesName === '总金额');
|
|
|
|
|
+ const barVal = bar ? `${bar.value} 次` : '';
|
|
|
|
|
+ const lineVal = line ? `¥${line.value}` : '';
|
|
|
|
|
+ return `${params[0].axisValue}<br/>${barVal}<br/>${lineVal}`;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
legend: {data: ['洗车量','总金额',], right: 20},
|
|
legend: {data: ['洗车量','总金额',], right: 20},
|
|
|
xAxis: {
|
|
xAxis: {
|
|
|
data: xAxis,
|
|
data: xAxis,
|
|
@@ -233,22 +242,26 @@ const initLineChart = (dataList: Array<any>) => {
|
|
|
yAxis: [
|
|
yAxis: [
|
|
|
{
|
|
{
|
|
|
type: 'value',
|
|
type: 'value',
|
|
|
- name: '费用/元 洗车量/次',
|
|
|
|
|
|
|
+ name: '洗车量/次',
|
|
|
position: 'left',
|
|
position: 'left',
|
|
|
|
|
+ axisLabel: {color: '#68a7a0'},
|
|
|
splitLine: {show: true, lineStyle: {type: 'dashed', color: '#f5f5f5'}},
|
|
splitLine: {show: true, lineStyle: {type: 'dashed', color: '#f5f5f5'}},
|
|
|
},
|
|
},
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 'value',
|
|
|
|
|
+ name: '费用/元',
|
|
|
|
|
+ position: 'right',
|
|
|
|
|
+ axisLabel: {color: '#3770ff'},
|
|
|
|
|
+ splitLine: {show: false},
|
|
|
|
|
+ },
|
|
|
],
|
|
],
|
|
|
series: [
|
|
series: [
|
|
|
{
|
|
{
|
|
|
name: '洗车量',
|
|
name: '洗车量',
|
|
|
type: 'bar',
|
|
type: 'bar',
|
|
|
barWidth:10,
|
|
barWidth:10,
|
|
|
- symbolSize: 6,
|
|
|
|
|
- symbol: 'circle',
|
|
|
|
|
- smooth: true,
|
|
|
|
|
|
|
+ yAxisIndex: 0,
|
|
|
data: dataList.map(k => k.totalOrders),
|
|
data: dataList.map(k => k.totalOrders),
|
|
|
- // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
|
|
|
|
|
- lineStyle: {color: '#68a7a0'},
|
|
|
|
|
itemStyle: {color: '#68a7a0', borderColor: '#68a7a0', barBorderRadius: 5},
|
|
itemStyle: {color: '#68a7a0', borderColor: '#68a7a0', barBorderRadius: 5},
|
|
|
areaStyle: {
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
@@ -257,29 +270,14 @@ const initLineChart = (dataList: Array<any>) => {
|
|
|
]),
|
|
]),
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- /* {
|
|
|
|
|
- name: '总金额',
|
|
|
|
|
- type: 'line',
|
|
|
|
|
- symbolSize: 6,
|
|
|
|
|
- symbol: 'circle',
|
|
|
|
|
- smooth: true,
|
|
|
|
|
- data: dataList.map(k=>u.fmt.fmtMoney(k.totalMoney)),
|
|
|
|
|
- lineStyle: {color: '#fe9a8b'},
|
|
|
|
|
- itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
|
|
|
|
|
- areaStyle: {
|
|
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
- {offset: 0, color: '#fe9a8bb3'},
|
|
|
|
|
- {offset: 1, color: '#fe9a8b03'},
|
|
|
|
|
- ]),
|
|
|
|
|
- },
|
|
|
|
|
- },*/
|
|
|
|
|
{
|
|
{
|
|
|
name: '总金额',
|
|
name: '总金额',
|
|
|
type: 'line',
|
|
type: 'line',
|
|
|
symbolSize: 6,
|
|
symbolSize: 6,
|
|
|
symbol: 'circle',
|
|
symbol: 'circle',
|
|
|
smooth: true,
|
|
smooth: true,
|
|
|
- data: dataList.map(k => u.fmt.fmtMoney(k.totalAmount)),
|
|
|
|
|
|
|
+ yAxisIndex: 1,
|
|
|
|
|
+ data: dataList.map(k => (k.totalAmount / 100).toFixed(2)),
|
|
|
lineStyle: {color: '#3770ff'},
|
|
lineStyle: {color: '#3770ff'},
|
|
|
itemStyle: {color: '#3770ff', borderColor: '#3770ff'},
|
|
itemStyle: {color: '#3770ff', borderColor: '#3770ff'},
|
|
|
areaStyle: {
|
|
areaStyle: {
|