Realized effect:

Please see echarts instructions:Use echarts in Vue for common chart summaries

Option configuration:

option = {
              legend: {
                 icon: 'rect'.// Shape types include circle, rect,line, roundRect, triangle, diamond, PIN, arrow, None
                 itemWidth: 10.// Set the width
                 itemHeight: 4.// Set the height
                 itemGap: 24.// Set spacing
                data: ['temperature'.'humidity'].textStyle: {
                    // Text style
                    color: '#c1dafc'.fontSize: '12'
                },
                right: '30%'.selectedMode: 'single'
              },
              tooltip: {
                  trigger: 'axis'
              },
              xAxis: {
                type: 'category'.splitLine: {
                    lineStyle: {
                        color: '#29457e'}},axisLabel: {interval: 0
    	        },
                data: ['1 hour'.'two hours'.'three hours'.'four hours'.'five hours'.'six hours'.'seven hours'.'eight hours'.'9 hours'.'ten hours'.'11 hours'.'12 hours'.'13 hours'.'14 hours'.'15 hours'.'16 hours'.'17 hours'.'18 hours'.'19 hours'.'20 hours'.'21 hours'.'22 hours'.'23 hours'.'24 hours']},yAxis: [{type: 'value'.axisTick: {// The Y-axis scale line
                    show: false
                  },
                  name: Unit :(°C).min: 0.max: 50.interval: 10.axisLabel: {
                    formatter: '{value}'}}].series: [{name: 'temperature'.type: 'line'.itemStyle : {  
                                normal : {  
                                    lineStyle: {color:'#b1de6a'}}},data: [2.0.4.9.7.0.23.2.25.6.23.25.21.26.20.25.36.48,]}, {name: 'humidity'.type: 'line'.itemStyle : {  
                                normal : {  
                                    lineStyle: {color:'#4ab0ee'}}},data: [2.6.5.9.9.0.26.4.28.7.70.7.75.6.82.2.54.63]]}}Copy the code

Data dynamic display Change the data value in the series