echarts实现如下图功能代码

 const  option = {tooltip: {trigger: 'axis'},legend: {left: "-1px",top:'15px',type: "scroll",icon:'rect',data:  [{name:'1', textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14}}, {name: '2', textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14}},{name: '3',textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14},itemStyle:{borderWidth:[5,10]}}],itemWidth:14,itemHeight:4},grid: {left: '2px',right: '3',bottom: '3%',containLabel: true},xAxis: {type: 'category',data:state.timeDate,axisLine:{            show: true ,lineStyle:{color:theme?'#474747':'#a8abb2',},onZero:false,},axisLabel: {show: true,margin:20,color: theme?"#E5EAF3":'#303133',},axisTick:{show: true,alignWithLabel: true}},yAxis:[{type: 'value',nameTextStyle:{color:'#fff'},axisLabel: {show: true,formatter: '{value}',color: theme?"#E5EAF3":'#303133',},axisLine:{            show: true ,lineStyle:{color:theme?'#474747':'#a8abb2',}},splitLine:{lineStyle:{color:theme?'#474747':'#a8abb2',type: "dashed"}}},{type: 'value',min: 0,max: 100,interval: 30,nameTextStyle:{color:'#fff'},axisLabel: {show: true,formatter: '{value} %',color: theme?"#E5EAF3":'#303133',},axisLine:{            show: true ,lineStyle:{color:theme?'#474747':'#a8abb2',}},splitLine:{lineStyle:{color:theme?'#474747':'#a8abb2',type: "dashed"}}}] ,series: [{name: '1',type: 'line',stack: 'Total',data:state.portData,showSymbol: false},{name: '2',type: 'line',stack: 'Total',data:state.refeData,showSymbol: false},{name: '3',           type: 'line',stack: '总量',data: state.stockData,areaStyle: {origin: 'start',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#644CE599'},{offset: 1,color: '#644CE500'}])},itemStyle: {color: '#644CE5'},lineStyle: {color: '#644CE5'},smoothMonotone: 'x',showSymbol: false},],color:['#FD7738','#01B5DE','#644CE5']};