Echarts-使用echarts画折线图

1、获取横纵坐标的值，调用drawLine方法

getdata(){
          this.pageInfo.params.reportId = this.chartComponent.params.conf_report_id;
          this.pageInfo.params.userId = this.chartComponent.params.user_id;
          this.$post(this.pageInfo.url, this.pageInfo.params, function(data) {
            if (data.isSuccess) {
              this.xlab = data.data.xlab;
              this.rdata = data.data.rdata;
              this.tdata = data.data.tdata;
            }
            this.drawLine();
          });
        },

2、按照echarts结构填写相关数据

html：

<div id="myNetChart" style="height: 480px;width: 880px;margin-top: 50px;"></div>

vue方法：

可以使用https://www.echartsjs.com/examples/zh/editor.html?c=line-stack试一下效果

drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('myNetChart'),this.theme);
          var option = {
            backgroundColor: 'rgba(128, 128, 128, 0.1)',
            title: {
              text: 网络情况,
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data:['终端→服务端','服务端→终端']
            },
            grid: {
              left: '4%',
              right: '7%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              padding: [0,20,0,0],
              textAlign:'left',
              feature: {
                saveAsImage: {
                  backgroundColor:"#37435e",
                }
              }
            },
            xAxis: {
              name: '时间',
              type: 'category',
              boundaryGap: false,
              data: this.xlab
            },
            yAxis: {
              name: '码率',
              type: 'value'
            },
            series: [
              {
                name:'终端→服务端',
                type:'line',
                stack: '码率',//加上stack，纵坐标会自适应
                data:this.tdata
              },
              {
                name:'服务端→终端',
                type:'line',
                stack: '码率',//加上stack，纵坐标会自适应
                data:this.rdata
              },
            ]
          };
          // 绘制图表
          myChart.setOption(option);
        },