154 lines
3.4 KiB
JavaScript
154 lines
3.4 KiB
JavaScript
import tools from "./tools";
|
|
|
|
export const lineChart1 = {
|
|
legend: {show: false},
|
|
grid: {
|
|
left: 50,
|
|
right: 0
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(14, 51, 111, 0.9)',
|
|
borderColor: '#1A6ABC',
|
|
textStyle: {color: '#fff'},
|
|
axisPointer: {type: 'cross'}
|
|
},
|
|
yAxis: {
|
|
nameGap: 23,
|
|
minInterval: 1,
|
|
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
|
axisLabel: {color: '#fff'},
|
|
axisPointer: {snap: true}
|
|
},
|
|
daemon: (color) => ({
|
|
type: "line",
|
|
showSymbol: false,
|
|
smooth: true,
|
|
lineStyle: {
|
|
shadowBlur: 4,
|
|
shadowOffsetY: 2,
|
|
width: 2
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
x2: 0,
|
|
y: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3)},
|
|
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1)}
|
|
]
|
|
}
|
|
}
|
|
})
|
|
};
|
|
export const lineChart2 = {
|
|
legend: {
|
|
right: 0, itemGap: 16,
|
|
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
|
},
|
|
grid: {
|
|
left: 50, right: 0
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
|
textStyle: {color: '#fff'}
|
|
},
|
|
daemon: color => ({
|
|
type: "line",
|
|
showSymbol: false,
|
|
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
|
|
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
|
|
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
|
|
]
|
|
}
|
|
}
|
|
})
|
|
};
|
|
export const lineChart3 = {
|
|
// legend: {
|
|
// right: 0, itemGap: 16,
|
|
// textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
|
// },
|
|
grid: {
|
|
left: 50, right: 0
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
|
textStyle: {color: '#fff'}
|
|
},
|
|
daemon: {
|
|
type: "line",
|
|
smooth: true,
|
|
lineStyle: {
|
|
shadowBlur: 1,
|
|
shadowOffsetY: 2,
|
|
width: 3
|
|
}
|
|
}
|
|
};
|
|
export const lineChart4 = {
|
|
legend: {
|
|
right: 0, itemGap: 16,
|
|
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
|
},
|
|
grid: {
|
|
left: 50, right: 0
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
|
textStyle: {color: '#fff'}
|
|
},
|
|
daemon: {
|
|
type: "line",
|
|
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
|
emphasis: {
|
|
focus: 'self'
|
|
}
|
|
}
|
|
};
|
|
export const lineChart5 = {
|
|
legend: {show: false},
|
|
grid: {
|
|
left: 50, right: 0, top: 10, bottom: 30
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
|
textStyle: {color: '#fff'},
|
|
axisPointer: {type: 'cross'}
|
|
},
|
|
yAxis: {
|
|
nameGap: 23, minInterval: 1,
|
|
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
|
axisLabel: {color: '#fff'},
|
|
axisPointer: {snap: true}
|
|
},
|
|
daemon: color => ({
|
|
type: "line",
|
|
showSymbol: false, smooth: true,
|
|
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
|
|
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
|
|
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
|
|
]
|
|
}
|
|
}
|
|
})
|
|
};
|
|
|
|
|
|
export default {
|
|
lineChart1,
|
|
lineChart2,
|
|
lineChart3,
|
|
lineChart4,
|
|
lineChart5,
|
|
}
|