<template>
    <div>
      <div class="form">
                                                          <!-- inline="true"表单域在一行 -->
            <el-form :inline="true"  :model="formInline" class="demo-form-inline">
              <el-form-item label="公司名称">
                <el-input  v-model="formInline.company_str" placeholder="公司名称：" size="mini"></el-input>
              </el-form-item>
  
              <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-search" size="mini">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
      <div id='echarts' ref="echarts_1" style="height:300px;width:600px;margin-left: 200px;"></div>
    </div>
  </template>
  <script>
  
  import * as echarts from "echarts"
  export default {
    data() {
        return {
          // 新数据
          x:['2000/6/5','2000/6/6','2000/6/7','2000/6/8','2000/6/9','2000/6/10','2000/6/11','2000/6/12','2000/6/13','2000/6/14','2000/6/15','2000/6/16','2000/6/17','2000/6/18','2000/6/19','2000/6/20','2000/6/21','2000/6/22','2000/6/23','2000/6/24','2000/6/25','2000/6/26','2000/6/27','2000/6/28','2000/6/29','2000/6/30','2000/7/1','2000/7/2','2000/7/3','2000/7/4','2000/7/5','2000/7/6','2000/7/7','2000/7/8','2000/7/9','2000/7/10','2000/7/11','2000/7/12','2000/7/13','2000/7/14','2000/7/15','2000/7/16','2000/7/17','2000/7/18','2000/7/19','2000/7/20','2000/7/21','2000/7/22','2000/7/23','2000/7/24'],
          y1:[200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
          y2:[319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
          y3:[329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
          y4:[284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
          
          formInline: {
            company_str: '',
          },
          legend_1:['银行'],
          series_1:[{
                name: '银行',
                type: 'line',
                data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
              }],

  
          option_1 : {
            title: [{
              x :'center',
              y:'bottom',
                
                text: '各行业风险价值（机构处于极端困难情况时）的时序变化'
              },
            ],
            tooltip: {
              trigger: 'axis'
            },
            legend:  {data:
              this.series_1
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data:  this.x,//其中的一个数据
            },
            yAxis: {
              type: 'value'
            },
            series: [{
                name: '银行',
                type: 'line',
                // stack: 'Total',
                data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
              }],
             
        },
  
        linedata_1:[
              {
                name: '银行',
                type: 'line',
                data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
              },
              {
                name: '北京银行',
                type: 'line',
                data: [319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],

              },
              {
                name: '中国银行',
                type: 'line',
                data: [329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
              },
              {
                name: 'Direct',
                type: 'line',
                data: [284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
              },
              {
                name: 'Search Engine',
                type: 'line',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
              }
            ],
        
        }
      },
      mounted(){
        //  风险价值动态变化
        this.onSubmit()
  
      },
  
      methods: {
        onSubmit() {
            if (this.formInline.company_str!==''){
              console.log(this.formInline.company_str)
              let tmp=this.linedata_1.find(item => item.name === this.formInline.company_str)  //es6
              this.option_1.series.push(tmp)
              console.log(this.option_1.series)
  
            }
            let echarts1 = echarts.init(this.$refs.echarts_1)
            echarts1.setOption(this.option_1)
  
        },
  
  
  
      }
  
  
  
  
  };
  </script>
  
  <style lang="less" scoped>
  
  
  // 第一层
  
  </style>
  
  
  
  