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']
      };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144