export const option6 = {
title: {
text: "充电开始时段分布",
x: "left",
textStyle: {
fontSize: 16,
fontStyle: "normal",
fontWeight: "normal",
color: "#33528D",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter(params) {
// console.log(params)
if (params.length > 1) {
return params[0].axisValue + "<br>" +
params[0].marker + params[0].seriesName + "占比 :" + params[0].value + "%" + "<br>" +
params[1].axisValue + "<br>" +
params[1].marker + params[1].seriesName + "占比 :" + params[1].value + "%"
} else {
return params[0].axisValue + "<br>" +
params[0].marker + params[0].seriesName + "占比 :" + params[0].value + "%"
}
},
},
legend: {
x: "70%",
icon: "circle",
data: ["快充", "慢充"],
},
axisPointer: {
link: { xAxisIndex: "all" },
},
dataZoom: [
{
show: true,
// realtime: true,
xAxisIndex: [0, 1],
height: "20",
bottom: 0,
start: 0,
end: 100,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "80%",
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2,
},
},
{
type: "inside",
// realtime: true,
xAxisIndex: [0, 1],
height: "20",
bottom: 0,
start: 0,
end: 10,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "80%",
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2,
},
},
],
grid: [
{
left: "5%",
right: "5%",
height: "125px",
},
{
left: "5%",
right: "5%",
top: "185px",
height: "125px",
},
],
xAxis: [
{
type: "category",
name: "时",
// data: ["(0,1]", "(2,3]"],
data: [],
nameTextStyle: {
color: "#999",
},
splitLine: {
show: false, //隐藏或显示
},
axisLine: {
lineStyle: {
color: "red",
type: "dashed",
},
},
axisLabel: {
show: false,
textStyle: {
color: "#999",
},
},
},
{
position: "bottom",
gridIndex: 1,
type: "category",
// name: "时间（hr）",
// data: ["(0,1]", "(2,3]"],
data: [],
nameTextStyle: {
color: "#fff",
},
splitLine: {
show: false, //隐藏或显示
lineStyle: {
color: "#fff",
type: "dashed",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#999",
},
},
},
],
yAxis: [
{
name: "占比（%）",
type: "value",
// interval:1,
nameTextStyle: {
color: "#999",
},
splitLine: {
lineStyle: {
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
},
show: true, //隐藏或显示
},
axisLine: {
lineStyle: {
color: "#fff",
type: 'dashed'
},
},
axisLabel: {
show: true,
textStyle: {
color: "#999",
},
showMinLabel: false,
},
},
{
gridIndex: 1,
name: "",
// interval:1,
type: "value",
inverse: true,
nameTextStyle: {
color: "#999",
},
splitLine: {
lineStyle: {
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
},
show: true, //隐藏或显示
},
axisLine: {
lineStyle: {
color: "#fff",
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
},
},
axisLabel: {
show: true,
textStyle: {
color: "#999",
},
showMinLabel: false,
},
},
{
type: 'value',
name: '',
nameTextStyle: {
color: "#999",
padding: [0, 0, 0, 40]
},
splitLine: {
lineStyle: {
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
},
show: true, //隐藏或显示
},
axisLine: {
lineStyle: {
color: "#fff",
type: 'dashed'
},
},
axisLabel: {
show: true,
textStyle: {
color: "#999",
},
showMinLabel: false,
},
// axisLabel: {
// formatter: '{value} %'
// }
},
{
gridIndex: 1,
type: 'value',
inverse: true,
name: '',
nameTextStyle: {
color: "#999",
padding: [40, 0, 0, 50],
},
splitLine: {
lineStyle: {
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
},
show: true, //隐藏或显示
},
axisLine: {
lineStyle: {
color: "#fff",
type: 'dashed'
},
},
axisLabel: {
show: true,
textStyle: {
color: "#999",
},
showMinLabel: false,
},
// axisLabel: {
// formatter: '{value} %'
// }
}
],
series: [
{
name: "快充",
type: "bar",
symbolSize: 8,
hoverAnimation: false,
data: [1, 1],
barMaxWidth: 30,
itemStyle: {
normal: {
color: "#4771D0",
barBorderRadius: [12, 12, 0, 0],
},
},
},
{
name: "慢充",
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
hoverAnimation: false,
data: [2, 0],
barMaxWidth: 30,
itemStyle: {
normal: {
color: "#E96D3F",
barBorderRadius: [0, 0, 12, 12],
},
},
},
{
name: "快充占比",
type: "line",
yAxisIndex: 2,
symbolSize: 8,
hoverAnimation: false,
data: [],
barMaxWidth: 30,
symbol: false,
itemStyle: {
normal: {
color: "none",
barBorderRadius: [0, 0, 12, 12],
},
},
},
{
name: "慢充占比",
type: "line",
symbolSize: 8,
xAxisIndex: 1,
yAxisIndex: 3,
hoverAnimation: false,
symbol: false,
data: [],
barMaxWidth: 30,
itemStyle: {
normal: {
color: "none",
barBorderRadius: [0, 0, 12, 12],
},
},
},
],
}
