option = {
grid: {
top: '15%',
left: '8%',
right: '10%',
bottom: '10%',
},
legend: {
top: '5%',
left: '18%',
itemWidth: 15,
itemHeight: 15,
data: [
{
name: '快充时长',
icon: 'rect',
textStyle: {
color: '#454545',
},
},
{
name: '充电电流',
icon: 'rect',
textStyle: {
color: '#454545',
},
},
],
},
tooltip: {
trigger: 'axis',
},
xAxis: {
name: '充电起止SOC区间',
nameTextStyle: {
color: '#999',
padding: [0, 0, -20, 0],
verticalAlign: 'bottom',
},
nameGap: -40,
data: ['0-30', '30-60', '60-90', '60-90'],
splitLine: {
show: false,
lineStyle: {
color: '#EFF0F1',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#999',
},
},
axisTick: {
show: true,
alignWithLabel: true,
},
axisLabel: {
show: true,
textStyle: {
color: '#999',
},
},
},
yAxis: [
{
name: '快充时长/分钟',
min: 0,
max: 200,
nameTextStyle: {
color: '#999',
padding: [-15, 0, 0, 0],
verticalAlign: 'top',
},
splitLine: {
show: true,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: '#999',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999',
},
},
},
{
name: '充电电流/KW',
min: 0,
max: 120,
nameTextStyle: {
color: '#999',
padding: [-15, 0, 0, 0],
verticalAlign: 'top',
},
position: 'right',
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#999',
},
},
},
],
series: [
{
name: '快充时长',
yAxisIndex: 0,
type: 'boxplot',
silent: true,
boxWidth: [28, 28],
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: '#1E7FF1',
borderWidth: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(30, 127, 241, 0.7)' },
{ offset: 1, color: 'rgba(30, 127, 241, 0)' },
]),
color0: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(30, 127, 241, 0)' },
{ offset: 1, color: 'rgba(30, 127, 241, 0.7)' },
]),
},
},
data: [
[50, 70, 85, 100, 120], // [min, Q1, median (or Q2), Q3, max]
[25, 38, 56, 70, 85],
[35, 45, 60, 86, 100],
[40, 50, 75, 90, 110],
],
},
{
name: '充电电流',
yAxisIndex: 1,
type: 'boxplot',
silent: true,
boxWidth: [28, 28],
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: '#15D0FC',
borderWidth: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(21, 208, 252, 0.7)' },
{ offset: 1, color: 'rgba(21, 208, 252, 0)' },
]),
color0: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(21, 208, 252, 0)' },
{ offset: 1, color: 'rgba(21, 208, 252, 0.7)' },
]),
},
},
data: [
[50, 70, 85, 100, 120], // [min, Q1, median (or Q2), Q3, max]
[25, 38, 56, 70, 85],
[35, 45, 60, 86, 100],
[40, 50, 75, 90, 110],
],
},
],
};