You can directly click on this echarts example and edit it directly
option = {<!-- -->
tooltip: {<!-- -->
trigger: 'axis',
},
xAxis: [
{<!-- -->
type: 'category',
boundaryGap: false,
axisTick: {<!-- -->
alignWithLabel: true,
},
axisLabel: {<!-- -->
textStyle: {<!-- -->
fontSize: 20,
fontWeight: 'bold',
},
formatter: function (value, index) {<!-- -->
if (index == 0) {<!-- -->
return '';
} else {<!-- -->
return value + 'month';
}
},
},
axisLine: {<!-- -->
lineStyle: {<!-- -->
color: '#2E75B6',
shadowColor: '#2E75B6',
shadowOffsetX: '24',
width: 5,
},
// onZero: true,
symbol: ['none', 'arrow'],
symbolSize: [13, 20],
symbolOffset: [0, 40],
},
},
],
yAxis: {<!-- -->
type: 'value',
splitNumber: 5,
max: 150,
splitLine: {<!-- -->
lineStyle: {<!-- -->
type: 'dashed',
color: '#DDD',
},
},
axisLabel: {<!-- -->
show: false,
textStyle: {<!-- -->
fontSize: 20,
fontWeight: 'bold',
},
},
axisLine: {<!-- -->
lineStyle: {<!-- -->
color: '#2E75B6',
shadowColor: '#2E75B6',
shadowOffsetY: '-24',
width: 5,
},
symbol: ['none', 'arrow'],
symbolSize: [13, 20],
symbolOffset: [0, 40],
},
nameTextStyle: {<!-- -->
color: '#999',
},
splitArea: {<!-- -->
show: false,
},
},
visualMap: {<!-- -->
type: 'piecewise',
text: ['High', 'Low'],
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [
{<!-- -->
gt: 0,
LTE: 1,
color: '#9DD3E8',
},
{<!-- -->
gt: 1,
LTE: 2,
color: '#F39494',
},
{<!-- -->
gt: 2,
LTE: 3,
color: 'rgba(178,219,158,0.5)',
},
{<!-- -->
gt: 3,
LTE: 4,
color: 'rgba(178,219,158,0.7)',
formatter: '444444444',
},
{<!-- -->
gt: 4,
LTE: 5,
color: 'rgba(178,219,158,1)',
},
{<!-- -->
gt: 5,
LTE: 6,
color: 'rgba(135,155,215,0.7)',
},
{<!-- -->
gt: 6,
LTE: 7,
color: 'rgba(135,155,215,1)',
},
],
},
series: [
{<!-- -->
name: 'Growth stage',
type: 'line',
symbol: 'emptyCircle',
showAllSymbol: true,
symbolSize: 12,
hoverAnimation: false,
data: [
[0, 0],
[1, 0],
[12, 30],
[24, 75],
[36, 95],
[48, 104],
[60, 110],
[72, 116],
[84, 120],
],
areaStyle: {<!-- -->},
lineStyle: {<!-- -->
normal: {<!-- -->
width: 5,
color: '#f26264',
},
},
itemStyle: {<!-- -->
normal: {<!-- -->
color: '#fff',
borderColor: '#f26264',
},
},
smooth: true,
markLine: {<!-- -->
symbol: 'none',
data: [
[
{<!-- -->
name: 'Preparation period',
coord: [0, 25],
symbol: 'arrow',
label: {<!-- -->
fontSize: 18,
formatter: ['{a|Phase 1:}', '{b|preparation period}'].join('\\
'),
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#333',
lineHeight: 28,
fontSize: 18,
},
b: {<!-- -->
color: '#10243F',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
color: '#708AB7',
width: 2,
type: 'solid',
},
},
},
{<!-- -->
coord: [1, 25],
symbol: 'arrow',
},
],
[
{<!-- -->
name: 'cultivation period',
coord: [1, 60],
symbol: 'arrow',
label: {<!-- -->
fontSize: 18,
formatter: ['{a|stage 2:}', '{b|cultivation period}'].join('\\
'),
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#333',
lineHeight: 28,
fontSize: 18,
},
b: {<!-- -->
color: '#632523',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
color: '#708AB7',
width: 2,
type: 'solid',
},
},
},
{<!-- -->
coord: [2, 60],
symbol: 'arrow',
},
],
[
{<!-- -->
name: 'Growth period',
coord: [2, 120],
symbol: 'arrow',
label: {<!-- -->
fontSize: 18,
formatter: '{a|stage 3:}' + '{b|growth stage}',
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#333',
lineHeight: 28,
fontSize: 18,
},
b: {<!-- -->
color: '#E87A0A',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
color: '#708AB7',
width: 2,
type: 'solid',
},
},
},
{<!-- -->
coord: [5, 120],
symbol: 'arrow',
},
],
[
{<!-- -->
name: 'Maturity',
coord: [5, 130],
symbol: 'arrow',
label: {<!-- -->
fontSize: 18,
formatter: '{a|stage 4:}' + '{b|maturity period}',
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#333',
lineHeight: 28,
fontSize: 18,
},
b: {<!-- -->
color: '#C2524D',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
color: '#708AB7',
width: 2,
type: 'solid',
},
},
},
{<!-- -->
coord: [7, 130],
symbol: 'arrow',
},
],
[
{<!-- -->
name: 'Growth period I',
coord: [2, 20],
label: {<!-- -->
fontSize: 16,
formatter: '{a|growth period I}',
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#E87A0A',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
width: 0,
color: '#708AB7',
},
},
},
{<!-- -->
coord: [3, 20],
},
],
[
{<!-- -->
name: 'Growth II',
coord: [3, 40],
label: {<!-- -->
fontSize: 16,
formatter: '{a|Growth II}',
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#E87A0A',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
width: 0,
color: '#708AB7',
},
},
},
{<!-- -->
coord: [4, 40],
},
],
[
{<!-- -->
name: 'Growth Stage III',
coord: [4, 60],
label: {<!-- -->
fontSize: 16,
formatter: '{a|Growth Stage III}',
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#E87A0A',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
width: 0,
color: '#708AB7',
},
},
},
{<!-- -->
coord: [5, 60],
},
],
[
{<!-- -->
name: 'Maturity I',
coord: [5, 70],
label: {<!-- -->
fontSize: 16,
formatter: '{a|maturity period I}',
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#C2524D',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
width: 0,
color: '#708AB7',
},
},
},
{<!-- -->
coord: [6, 70],
},
],
[
{<!-- -->
name: 'Maturity II',
coord: [6, 85],
label: {<!-- -->
fontSize: 16,
formatter: '{a|Maturity II}',
rich: {<!-- -->
// public style
a: {<!-- -->
color: '#C2524D',
fontWeight: 'bold',
fontSize: 18,
},
},
position: 'insideMiddleTop',
},
lineStyle: {<!-- -->
normal: {<!-- -->
width: 0,
color: '#708AB7',
},
},
},
{<!-- -->
coord: [7, 85],
},
],
{<!-- -->
name: '',
xAxis: '1',
label: {<!-- -->
show: false,
},
lineStyle: {<!-- -->
normal: {<!-- -->
color: '#708AB7',
width: 2,
type: 'solid',
},
},
},
{<!-- -->
name: '',
xAxis: '12',
label: {<!-- -->
show: false,
},
lineStyle: {<!-- -->
normal: {<!-- -->
color: '#708AB7',
width: 2,
type: 'solid',
},
},
},
{<!-- -->
name: '',
xAxis: '48',
label: {<!-- -->
show: false,
},
lineStyle: {<!-- -->
normal: {<!-- -->
color: '#708AB7',
width: 2,
type: 'solid',
},
},
},
{<!-- -->
name: '',
xAxis: '72',
label: {<!-- -->
show: false,
},
lineStyle: {<!-- -->
normal: {<!-- -->
color: '#708AB7',
width: 2,
type: 'solid',
},
},
},
],
},
},
],
};