option = {
backgroundColor: "#03213D",
color: ["#5090FF", "#01B3E4"],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#FFF",
},
},
grid: {
left: "2%",
right: "5%",
bottom: "5%",
top: "30px",
containLabel: true,
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
startValue: 0,
endValue: 7,
filterMode: 'filter',
height: 4,
bottom: 5,
handleSize: '300%',
handleIcon:
'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
handleStyle: {
color: '#0E1557'
},
backgroundColor: '#1c3a75',
fillerColor: '#295fcc',
borderColor: 'transparent',
textStyle: {
color: 'transparent'
},
dataBackground: {
areaStyle: {
opacity: 0
},
lineStyle: {
opacity: 0
}
}
}
],
legend: {
show: true,
icon: "rect",
orient: "horizontal",
left: "right",
itemWidth: 12,
itemHeight: 12,
formatter: ["{a|{name}}"].join("\n"),
textStyle: {
fontSize: 12,
color: "#6A93B9",
height: 8,
rich: {
a: {
verticalAlign: "bottom",
},
},
},
data: ["魅力值", "能力值"],
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#BDD8FB",
fontSize: 12,
},
},
axisLabel: {
// interval:0,
color: "#BDD8FB",
fontSize: 12,
},
axisTick: {
show: false,
},
data: [
"橘梨纱",
"美竹铃",
"天海翼",
"泷泽萝拉",
"樱井莉亚",
"铃原爱蜜莉",
"铃原爱蜜莉2",
],
},
yAxis: {
type: "value",
min: 0,
minInterval: 1,
nameTextStyle: {
fontSize: 12,
color: "#BDD8FB",
align: "center",
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.15)",
// type: 'dashed', // dotted 虚线
},
},
splitArea: { show: false },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 12,
fontFamily: "Bebas",
color: "#BDD8FB",
},
},
series: [
{
type: "line",
// symbol: "none",
// showSymbol: false,
smooth: true, // 是否曲线
name: "魅力值", // 图例对应类别
data: [4000, 6000, 7000, 2000, 5000, 7000, 9000], // 纵坐标数据
areaStyle: {
// 区域颜色
// color: new graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#5090FF",
// },
// {
// offset: 1,
// color: "#1057E5",
// },
// ]),
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: '#5090FF' // 0% 处的颜色
},
{
offset: 1,
color: '#1057E500' // 100% 处的颜色
}
]
},
},
},
{
type: "line",
smooth: true,
name: "能力值",
data: [1000, 4000, 5000, 6000, 3000, 8000, 7000],
areaStyle: {
// color: new graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#01B3E4",
// },
// {
// offset: 1,
// color: "#86DCF3",
// },
// ]),
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: '#01B3E4' // 0% 处的颜色
},
{
offset: 1,
color: '#86DCF300' // 100% 处的颜色
}
]
},
},
},
],
};