option = {
backgroundColor: 'rgb(19, 47, 74)',
textStyle: {
color: '#FFF'
},
grid: {
left: '2%',
right: '4%',
bottom: '14%',
top: '18%',
containLabel: true
},
title: {
show: false
},
tooltip: {
trigger: 'axis',
backgroundColor: '#0A2945',
// valueFormatter: value => value + '%',
textStyle: {
color: '#FFF'
},
extraCssText: 'box-shadow: 1px 1px 5px #fff'
},
legend: {
// data: ['AI A-FCST', '人工', 'C-FCST', 'C-FCST Qty', 'AI A-FCST Qty', '人工 Qty', 'AD Qty'],
textStyle: {
color: '#d0d0d0',
align: 'center',
fontSize: 13
},
top: '8%',
x: 'center',
},
xAxis: {
type: 'category',
// boundaryGap: false,
data: ["2023/10/09", "2023/10/16", "2023/10/23", "2023/10/30", "2023/11/06", "2023/11/13", "2023/11/20", "2023/11/27", "2023/12/04", "2023/12/11", "2023/12/18", "2023/12/25", "2024/01/01", "2024/01/08", "2024/01/15", "2024/01/22", "2024/01/29", "2024/02/05", "2024/02/12"].map((week) => (`WK${week.slice(5)}`))
},
yAxis: [
{
type: 'value',
splitLine: {
// show: false,
lineStyle: {
opacity: 0.5
}
},
},
{
type: 'value',
splitLine: {
show: false,
lineStyle: {
opacity: 0.5
}
},
yAxisIndex: 1,
}
],
dataZoom: [
{
show: true,
height: 12,
xAxisIndex: [0],
bottom: '8%',
start: 10,
end: 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5',
},
color: '#fff',
borderColor: '#90979c'
},
{
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}
],
series: [
{
name: 'C-FCST',
type: 'line',
stack: 'Total',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 13,
// lineStyle: {
// color: '#00ca95',
// },
label: {
show: true,
position: 'top',
fontSize: 14,
// color: '#00ca95',
formatter: '{c}%'
},
// itemStyle: {
// color: '#00ca95',
// borderColor: '#fff',
// borderWidth: 0,
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: 'rgba(0,202,149, 0.3)' },
// { offset: 1, color: 'rgba(0,202,149, 0)' },
// ],
// false
// ),
// shadowColor: 'rgba(0,202,149, 0.9)',
// shadowBlur: 20,
// },
data: [68.82, 67.57, 54.07, 41.56, 32.04, 6.71, 22.74, 274.58,]
},
{
name: 'MPSP',
type: 'line',
stack: 'Total',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 13,
// lineStyle: {
// color: '#00ca95',
// },
label: {
show: true,
position: 'top',
fontSize: 14,
// color: '#00ca95',
formatter: '{c}%'
},
// itemStyle: {
// color: '#00ca95',
// borderColor: '#fff',
// borderWidth: 0,
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: 'rgba(0,202,149, 0.3)' },
// { offset: 1, color: 'rgba(0,202,149, 0)' },
// ],
// false
// ),
// shadowColor: 'rgba(0,202,149, 0.9)',
// shadowBlur: 20,
// },
data: [90.52, 86.02, 72.61, 81.98, 73.49, 45.65, 70.38, 212.88]
},
{
name: 'AI A-FCST',
type: 'line',
stack: 'Total',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 13,
// lineStyle: {
// color: '#00ca95',
// },
label: {
show: true,
position: 'top',
fontSize: 14,
// color: '#00ca95',
formatter: '{c}%'
},
// itemStyle: {
// color: '#00ca95',
// borderColor: '#fff',
// borderWidth: 0,
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: 'rgba(0,202,149, 0.3)' },
// { offset: 1, color: 'rgba(0,202,149, 0)' },
// ],
// false
// ),
// shadowColor: 'rgba(0,202,149, 0.9)',
// shadowBlur: 20,
// },
data: [67.69, 55.91, 49.82, 48.66, 22.49, 20.46, 25.01, 262.71]
},
{
name: 'AD Qty',
type: 'line',
stack: 'Total',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 13,
// lineStyle: {
// color: '#00ca95',
// },
label: {
show: true,
position: 'top',
fontSize: 14,
// color: '#00ca95',
formatter: '{c}'
},
// itemStyle: {
// color: '#00ca95',
// borderColor: '#fff',
// borderWidth: 0,
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: 'rgba(0,202,149, 0.3)' },
// { offset: 1, color: 'rgba(0,202,149, 0)' },
// ],
// false
// ),
// shadowColor: 'rgba(0,202,149, 0.9)',
// shadowBlur: 20,
// },
data: [...Array(8).fill(null), 10000, 14000, 16000],
yAxisIndex: 1
},
{
name: 'C-FCST Qty',
type: 'line',
stack: 'Total',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 13,
// lineStyle: {
// color: '#00ca95',
// },
label: {
show: true,
position: 'top',
fontSize: 14,
// color: '#00ca95',
formatter: '{c}'
},
// itemStyle: {
// color: '#00ca95',
// borderColor: '#fff',
// borderWidth: 0,
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: 'rgba(0,202,149, 0.3)' },
// { offset: 1, color: 'rgba(0,202,149, 0)' },
// ],
// false
// ),
// shadowColor: 'rgba(0,202,149, 0.9)',
// shadowBlur: 20,
// },
data: [...Array(11).fill(null), 16756, 21232, 22515, 28134, 13984, 28873, 24521, 20786],
yAxisIndex: 1
},
{
name: 'MPSP Qty',
type: 'line',
stack: 'Total',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 13,
// lineStyle: {
// color: '#00ca95',
// },
label: {
show: true,
position: 'top',
fontSize: 14,
// color: '#00ca95',
formatter: '{c}'
},
// itemStyle: {
// color: '#00ca95',
// borderColor: '#fff',
// borderWidth: 0,
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: 'rgba(0,202,149, 0.3)' },
// { offset: 1, color: 'rgba(0,202,149, 0)' },
// ],
// false
// ),
// shadowColor: 'rgba(0,202,149, 0.9)',
// shadowBlur: 20,
// },
data: [...Array(11).fill(null), 13845, 15069, 20967, 12913, 11559, 11776, 19857, 20432],
yAxisIndex: 1
},
{
name: 'AI A-FCST Qty',
type: 'line',
stack: 'Total',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 13,
// lineStyle: {
// color: '#00ca95',
// },
label: {
show: true,
position: 'top',
fontSize: 14,
// color: '#00ca95',
formatter: '{c}'
},
// itemStyle: {
// color: '#00ca95',
// borderColor: '#fff',
// borderWidth: 0,
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: 'rgba(0,202,149, 0.3)' },
// { offset: 1, color: 'rgba(0,202,149, 0)' },
// ],
// false
// ),
// shadowColor: 'rgba(0,202,149, 0.9)',
// shadowBlur: 20,
// },
data: [...Array(11).fill(null), 20792, 26827, 28291, 15765, 20876, 11177, 11987, 10625],
yAxisIndex: 1
},
]
};