133 lines
3.0 KiB
TypeScript
133 lines
3.0 KiB
TypeScript
export const initRankAreaEchart = ({
|
|
echart,
|
|
echarts,
|
|
xAxisData,
|
|
yAxisData,
|
|
Score,
|
|
currentCount,
|
|
areaIndex,
|
|
}) => {
|
|
echart.value.init(echarts, (chart) => {
|
|
let option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xAxisData,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#E5E5E5',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: '#999999',
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
show: false,
|
|
},
|
|
grid: {
|
|
left: '16',
|
|
right: '16',
|
|
containLabel: false,
|
|
},
|
|
series: [
|
|
{
|
|
data: yAxisData,
|
|
type: 'line',
|
|
smooth: 0.6,
|
|
smoothMonotone: 'x',
|
|
symbol: 'none',
|
|
lineStyle: {
|
|
width: 2,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(30, 231, 255, 1)',
|
|
},
|
|
{
|
|
offset: 0.33,
|
|
color: 'rgba(36, 154, 255, 1)',
|
|
},
|
|
{
|
|
offset: 0.66,
|
|
color: 'rgba(111, 66, 251, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(111, 66, 251, 1)',
|
|
},
|
|
]),
|
|
},
|
|
areaStyle: {
|
|
opacity: 1,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(17,126,255,0.16)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(17,128,255,0)',
|
|
},
|
|
]),
|
|
},
|
|
markPoint: {
|
|
symbol: 'circle',
|
|
symbolSize: 8,
|
|
itemStyle: {
|
|
color: '#4080FF',
|
|
borderColor: '#259BFF',
|
|
borderWidth: 2,
|
|
},
|
|
data: [
|
|
{
|
|
xAxis: Score,
|
|
yAxis: currentCount,
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#4080FF',
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
markArea: {
|
|
itemStyle: {
|
|
color: 'rgba(64, 128, 255, 0.1)',
|
|
},
|
|
data: [
|
|
[
|
|
{
|
|
xAxis: areaIndex + 30,
|
|
},
|
|
{
|
|
xAxis: areaIndex - 30,
|
|
},
|
|
],
|
|
],
|
|
},
|
|
markLine: {
|
|
symbol: ['none', 'none'],
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#4080FF',
|
|
width: 1,
|
|
opacity: 0.5,
|
|
},
|
|
data: [
|
|
{
|
|
xAxis: Score,
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
}
|
|
chart.setOption(option)
|
|
})
|
|
}
|