// prettier-ignoreconst data =[["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];const dateList = data.map(function(item){
return item[0];});const valueList = data.map(function(item){
return item[1];});
option ={
// Make gradient line herevisualMap:[{
show:false,type:'continuous',seriesIndex:0,min:0,max:400},{
show:false,type:'continuous',seriesIndex:1,dimension:0,min:0,max: dateList.length -1}],title:[{
left:'center',text:'Gradient along the y axis'},{
top:'55%',left:'center',text:'Gradient along the x axis'}],tooltip:{
trigger:'axis',axisPointer:{
type:'cross',animation:false,label:{
backgroundColor:'#ccc',borderColor:'#aaa',borderWidth:1,shadowBlur:0,shadowOffsetX:0,shadowOffsetY:0,color:'#222'}},},xAxis:[{
data: dateList
},{
data: dateList,gridIndex:1}],yAxis:[{
},{
gridIndex:1}],grid:[{
bottom:'60%'},{
top:'60%'}],series:[{
type:'line',showSymbol:false,data: valueList
},{
type:'line',showSymbol:false,data: valueList,xAxisIndex:1,yAxisIndex:1}]};
code explanation
title: The configuration object of the title component, used to set the title of the chart. Among them, textthe attribute is used to set the title text, and leftthe attribute is used to set the horizontal position of the title.
tooltip: The configuration object of the tooltip component, which is used to display the tooltip when the mouse hovers over it. Among them trigger, the attribute is used to set the trigger type (here, it is displayed when the mouse is hovering), and axisPointerthe attribute is used to set the style and animation effect of the axis indicator.
legend: The configuration object of the legend component, which is used to display the names and corresponding symbols of each data series in the chart. Among them, datathe attribute is used to set the content of the legend, and leftthe attribute is used to set the horizontal position of the legend.
toolbox: The configuration object of the toolbox component, which is used to provide some common operation buttons. Among them, featurethe attribute contains multiple sub-items, such as dataZoom(data zoom), restore(reset) and saveAsImage(save as picture).
axisPointer: The global public setting of the coordinate axis indicator. This is used to link the indicators of the two coordinate axes.
dataZoom: The configuration object of the data area zoom component, used to control the zoom state of the data area. Among them show, the attribute is used to set whether to display the zoom bar, realtimethe attribute is used to set whether to enable the real-time zoom function, startand endthe attribute is used to set the default zoom interval, and xAxisIndexthe attribute is used to specify which axis to zoom.
grid: Related settings of the drawing grid in the Cartesian coordinate system. It contains two objects, corresponding to the upper and lower parts of the grid, leftand rightthe heightproperties are used to control the position and size of the grid.
xAxis: Related settings of the horizontal axis in the Cartesian coordinate system. It contains two objects, corresponding to the horizontal axis of the upper and lower parts, typethe attribute is used to set the axis type (here is the category type), the boundaryGapattribute is used to control whether to leave blank on both sides of the data, and axisLinethe attribute is used to control whether Display the coordinate axis, datathe property is used to set the content of the axis scale label, and positionthe property is used to control the position of the coordinate axis.
yAxis: Related settings of the vertical axis in the Cartesian coordinate system. It contains two objects, corresponding to the vertical axis of the upper and lower parts, namethe property is used to set the name of the coordinate axis, typethe property is used to set the type of the coordinate axis (numeric type here), maxthe property is used to set the maximum value of the coordinate axis, and gridIndexthe property Used to control which grid this axis belongs to.
series: The configuration object of the data series, used to describe the type, name, style, etc. of each data series. It contains two objects, corresponding to two data series (here is a line chart), namethe attribute is used to set the data series name, typethe attribute is used to set the data series type, xAxisIndexand yAxisIndexthe attribute is used to specify the coordinate axis to which the data series belongs. symbolSizeAttributes are used to control the data point symbol size, dataand attributes are used to set the data.
