<template>
    <div class="base-box2">
      <mychart v-if="isShow" class="chart" configId="chart1" :datas="chartdata.chart1" tit="水深" danwei="m"></mychart>
      <mychart2 v-if="isShow" class="chart" configId="chart2"></mychart2>
      <mychart  v-if="isShow" class="chart3 chart" configId="chart3" :datas="chartdata.chart3" tit="电导率" danwei="μS/cm"></mychart>
      <mychart v-if="isShow" class="chart4 chart" configId="chart4" :datas="chartdata.chart4" tit="温度" danwei="℃"></mychart>
      <!--<mychart v-if="isShow" class="chart5" configId="chart5" :datas="chartdata.chart1" tit="水浊度" danwei="μS/cm"></mychart>-->
    </div>
</template>

<script>
  import chartData from './chartsData'
  import mychart from './myCharts'
  import mychart2 from './myCharts2'
  // import chuanganqi from '../../popupContent/chuanganqiBox'
  export default {
        name: "",
        data() {
            return {
              chartdata: chartData
            }
        },
        props: ['isShow'],
        components: {mychart, mychart2},
        created() {
          console.log(this.isShow)
        },
        mounted(){

        },
        methods: {

        },
        destroyed:function () {
          console.log('destroy')

        }
    }
</script>

<style scoped lang="less" type="text/less">
  .base-box2{
    width: 100%;
    height: 85vh;
    overflow-y: auto;
  }
  .chart{
    display: inline-block;
    width: 45%;
  }
  .chart3, .chart4, .chart5{
    margin-top: 25px;

  }
</style>
