option = {
legend: {
icon: "circle",
top: "3%",
left: "7%",
itemWidth: 12,
itemGap: 16,
textStyle: {
color: "#fff",
fontSize: 17,
fontWeight: "bold",
padding: [0, 0, 0, 5],
},
},
tooltip: {
trigger: "axis",
axisPointer: {
label: {
show: true,
backgroundColor: "#fff",
color: "#556677",
borderColor: "rgba(0,0,0,0)",
shadowColor: "rgba(0,0,0,0)",
shadowOffsetY: 0,
},
lineStyle: {
width: 0,
},
},
backgroundColor: "#fff",
textStyle: {
color: "#5c6c7c",
},
padding: [10, 10],
extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
},
grid: {
top: "15%",
},
xAxis: [
{
type: "category",
data: [
"2023-08-06",
"2023-08-13",
"2023-08-20",
"2023-08-27",
"2023-09-03",
"2023-09-10",
"2023-09-17",
],
axisLine: {
lineStyle: {
width: 2,
color: "#3EB4E8",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
textStyle: {
color: "#fff",
},
// 默认x轴字体大小
fontSize: 18,
// margin:文字到x轴的距离
margin: 15,
fontWeight: "bold",
},
axisPointer: {
label: {
// padding: [11, 5, 7],
padding: [0, 0, 10, 0],
/*
除了padding[0]建议必须是0之外，其他三项可随意设置
和CSSpadding相同，[上，右，下，左]
如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
padding[2]的10:
10 = 文字距下边线的距离 + 下边线的宽度
如：UI图中文字距下边线距离为7 下边线宽度为2
则padding: [0, 0, 9, 0]
*/
// 这里的margin和axisLabel的margin要一致!
margin: 15,
// 移入时的字体大小
fontSize: 12,
backgroundColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#fff", // 0% 处的颜色
},
{
// offset: 0.9,
offset: 0.86,
/*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
*/
color: "#fff", // 0% 处的颜色
},
{
offset: 0.86,
color: "#33c0cd", // 0% 处的颜色
},
{
offset: 1,
color: "#33c0cd", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
boundaryGap: false,
},
],
yAxis: [
{
type: "value",
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#3EB4E8",
},
},
axisLabel: {
textStyle: {
color: "#fff",
},
// 默认x轴字体大小
fontSize: 19,
// margin:文字到x轴的距离
margin: 15,
},
splitLine: {
show: false,
width: 0.5,
color: "#707070",
},
},
],
series: [
{
name: "财产险",
type: "line",
stack: "all",
data: [10, 10, 30, 12, 15, 3, 7],
symbolSize: 1,
symbol: "circle",
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#01BABC",
},
{
offset: 1,
color: "#01BABC",
},
]),
// shadowColor: "rgba(158,135,255, 0.3)",
// shadowBlur: 10,
// shadowOffsetY: 20,
},
areaStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#01BABC",
},
{
offset: 0.8,
color: "rgba(255,255,255,0)",
},
{
offset: 1,
color: "rgba(255,255,255,0)",
},
]),
},
itemStyle: {
normal: {
color: "#01BABC",
borderColor: "#01BABC",
},
},
},
{
name: "工程险",
type: "line",
stack: "all",
data: [5, 12, 11, 14, 25, 16, 10],
symbolSize: 1,
symbol: "circle",
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: "#458FCE",
},
{
offset: 1,
color: "#458FCE",
},
]),
// shadowColor: "rgba(115,221,255, 0.3)",
// shadowBlur: 10,
// shadowOffsetY: 20,
},
areaStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#458FCE",
},
{
offset: 0.8,
color: "rgba(255,255,255,0)",
},
{
offset: 1,
color: "rgba(255,255,255,0)",
},
]),
},
itemStyle: {
normal: {
color: "#458FCE",
borderColor: "#458FCE",
},
},
},
{
name: "一般责任险",
type: "line",
stack: "all",
data: [15, 22, 6, 17, 25, 18, 16],
symbolSize: 1,
symbol: "circle",
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: "#474FC1",
},
{
offset: 1,
color: "#474FC1",
},
]),
// shadowColor: "rgba(115,221,255, 0.3)",
// shadowBlur: 10,
// shadowOffsetY: 20,
},
areaStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#474FC1",
},
{
offset: 0.8,
color: "rgba(255,255,255,0)",
},
{
offset: 1,
color: "rgba(255,255,255,0)",
},
]),
},
itemStyle: {
normal: {
color: "#474FC1",
borderColor: "#474FC1",
},
},
},
{
name: "短期意健险",
type: "line",
stack: "all",
data: [25, 18, 17, 16, 29, 17, 16],
symbolSize: 1,
symbol: "circle",
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: "#4052DE",
},
{
offset: 1,
color: "#4052DE",
},
]),
},
areaStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4052DE",
},
{
offset: 0.8,
color: "rgba(255,255,255,0)",
},
{
offset: 1,
color: "rgba(255,255,255,0)",
},
]),
},
itemStyle: {
normal: {
color: "#4052DE",
borderColor: "#4052DE",
},
},
},
{
name: "财务及专业风险保险",
type: "line",
stack: "all",
data: [20, 22, 5, 8, 7, 36, 20],
symbolSize: 1,
symbol: "circle",
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: "#3FA7DD",
},
{
offset: 1,
color: "#3FA7DD",
},
]),
},
areaStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#3FA7DD",
},
{
offset: 0.8,
color: "rgba(255,255,255,0)",
},
{
offset: 1,
color: "rgba(255,255,255,0)",
},
]),
},
itemStyle: {
normal: {
color: "#3FA7DD",
borderColor: "#3FA7DD",
},
},
},
{
name: "船舶险及货运险",
type: "line",
stack: "all",
data: [5, 12, 11, 14, 25, 16, 10],
symbolSize: 1,
symbol: "circle",
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: "#4AC434",
},
{
offset: 1,
color: "#4AC434",
},
]),
},
areaStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4AC434",
},
{
offset: 0.8,
color: "rgba(255,255,255,0)",
},
{
offset: 1,
color: "rgba(255,255,255,0)",
},
]),
},
itemStyle: {
normal: {
color: "#4AC434",
borderColor: "#4AC434",
},
},
},
{
name: "其他",
stack: "all",
type: "line",
data: [5, 12, 11, 14, 25, 16, 10],
symbolSize: 1,
symbol: "circle",
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: "#2E830D",
},
{
offset: 1,
color: "#2E830D",
},
]),
},
areaStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#2E830D",
},
{
offset: 0.8,
color: "rgba(255,255,255,0)",
},
{
offset: 1,
color: "rgba(255,255,255,0)",
},
]),
},
itemStyle: {
normal: {
color: "#2E830D",
borderColor: "#2E830D",
},
},
},
],
};