<!--
 * @Description: example
 * @Author: 王晓颖
 * @Date: 2020-08-15 14:25:57
 -->
<!--suppress ALL -->
<template>
  <div class="container">
    <div class="example-row">
      <div class="example-block">
        <simple-bar-chart
          id="simplebar1"
          :x-axis-data="simpleBarChartData.xAxisData"
          :series-data="simpleBarChartData.data"
        />
      </div>
      <div class="example-block">
        <colorful-bar-chart
          id="colorfulbar1"
          :x-axis-data="simpleBarChartData.xAxisData"
          :series-data="simpleBarChartData.data"
        />
      </div>
      <div class="example-block">
        <simple-horizontal-bar-chart
          id="horizontalbar1"
          :x-axis-data="simpleBarChartData.xAxisData"
          :series-data="simpleBarChartData.data"
        />
      </div>
      <div class="example-block">
        <colorful-horizontal-bar-chart
          id="horizontalbar2"
          :x-axis-data="simpleBarChartData.xAxisData"
          :series-data="simpleBarChartData.data"
        />
      </div>
      <div class="example-block">
        <stack-bar-chart
          id="stackbar1"
          :x-axis-data="stackChartData.xAxisData"
          :series-data="stackChartData.data"
        />
      </div>
      <div class="example-block">
        <stack-horizontal-bar-chart
          id="stackbar2"
          :x-axis-data="stackChartData.xAxisData"
          :series-data="stackChartData.data"
        />
      </div>
    </div>
    <div class="example-row">
      <div class="example-block">
        <zibra-bar-chart
          id="zibrabar1"
          :x-axis-data="simpleBarChartData.xAxisData"
          :series-data="simpleBarChartData.data"/>
      </div>
      <div class="example-block">
        <zibra-horizontal-bar-chart
          id="zibrabar2"
          :x-axis-data="simpleBarChartData.xAxisData"
          :series-data="simpleBarChartData.data"/>
      </div>
      <div class="example-block">
        <group-bar-chart
          id="groupbar1"
          :x-axis-data="stackChartData.xAxisData"
          :series-data="stackChartData.data"
        />
      </div>
      <div class="example-block">
        <group-horizontal-bar-chart
          id="groupbar2"
          :x-axis-data="stackChartData.xAxisData"
          :series-data="stackChartData.data"/>
      </div>
      <div class="example-block">
        <polar-bar-chart
          id="polarbar2"
          :x-axis-data="simpleBarChartData.xAxisData"
          :series-data="simpleBarChartData.data"
        />
      </div>
      <div class="example-block">
        <simple-line-chart
          :id="simpleLineChartData.id"
          :x-axis-data="simpleLineChartData.xAxisData"
          :series-data="simpleLineChartData.data"/>
      </div>
    </div>
    <div class="example-row">
      <div class="example-block">
        <gradient-line-chart
          id="linechart2"
          :x-axis-data="simpleLineChartData.xAxisData"
          :series-data="simpleLineChartData.data"/>
      </div>
      <div class="example-block">
        <simple-line-chart
          id="linechart3"
          :smooth="false"
          :x-axis-data="simpleLineChartData.xAxisData"
          :series-data="simpleLineChartData.data"/>
      </div>
      <div class="example-block">
        <gradient-line-chart
          id="linechart4"
          :smooth="false"
          :x-axis-data="simpleLineChartData.xAxisData"
          :series-data="simpleLineChartData.data"/>
      </div>
      <div class="example-block" style="display:flex;flex-wrap:wrap;">
        <div style="width:90px;height:90px;">
          <dv-water-level-pond :config="rectWaterConfig" style="height:90px" />
        </div>
        <div style="width:90px;height:90px;margin-left: 5px">
          <dv-water-level-pond :config="roundWaterConfig" style="height:90px" />
        </div>
        <div style="width:90px;height:90px">
          <round-liquid-fill id="liquidfill1" :data="liquidFillConfig.data"/>
        </div>
        <div style="width:90px;height:90px;margin-left: 5px">
          <round-liquid-fill id="liquidfill2" shape="rect" :data="liquidFillConfig.data"/>
        </div>
      </div>
      <div class="example-block" style="display:flex;flex-wrap:wrap;">
        <div style="width:90px;height:90px">
          <round-liquid-fill id="liquidfill3" shape="triangle" :data="liquidFillConfig.data"/>
        </div>
        <div style="width:90px;height:90px;margin-left: 5px">
          <round-liquid-fill id="liquidfill4" shape="diamond" :data="liquidFillConfig.data"/>
        </div>
        <div style="width:90px;height:90px">
          <round-liquid-fill id="liquidfill5" shape="roundRect" :data="liquidFillConfig.data"/>
        </div>
        <div style="width:90px;height:90px;margin-left: 5px">
          <round-liquid-fill id="liquidfill6" shape="arrow" :data="liquidFillConfig.data"/>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Title1 from '../../components/text/title/Title1'
import Text2 from '../../components/text/Text2'
import ScrollBoard from '../../components/board/ScrollBoard'
import DigitalFlop from '../../components/text/digitalFlop/DigitalFlop'
import Title2 from "../../components/text/title/Title2";
import Title3 from "../../components/text/title/Title3";
import Marquee from "../../components/text/marquee/marquee";
import WordCloud from "../../components/text/wordCloud/wordCloud";
import ProgressBar from "@/components/progressBar/ProgressBar1";
import ProgressBar2 from "@/components/progressBar/ProgressBar2";
import SimpleBarChart from "../../components/barChart/simpleBarChart";
import ColorfulBarChart from "../../components/barChart/colorfulBarChart";
import SimpleHorizontalBarChart from "../../components/barChart/simpleHorizontalBarChart";
import ColorfulHorizontalBarChart from "../../components/barChart/colorfulHorizontalBarChart";
import StackBarChart from "../../components/barChart/stackBarChart";
import StackHorizontalBarChart from "../../components/barChart/stackHorizontalBarChart";
import ZibraBarChart from "../../components/barChart/zibraBarChart";
import ZibraHorizontalBarChart from "../../components/barChart/zibraHorizontalBarChart";
import GroupBarChart from "../../components/barChart/groupBarChart";
import GroupHorizontalBarChart from "../../components/barChart/groupHorizontalBarChart";
import PolarBarChart from "../../components/barChart/polarBar";
import SimpleLineChart from "../../components/lineChart/simpleLineChart";
import GradientLineChart from "../../components/lineChart/gradientLineChart";
import RoundLiquidFill from "../../components/liquidFill/roundLiquidFill";
export default {
  name: 'ExampleBar',
  components: {
    RoundLiquidFill,
    GradientLineChart,
    SimpleLineChart,
    PolarBarChart,
    GroupHorizontalBarChart,
    GroupBarChart,
    ZibraHorizontalBarChart,
    ZibraBarChart,
    StackHorizontalBarChart,
    StackBarChart,
    ColorfulHorizontalBarChart,
    SimpleHorizontalBarChart,
    ColorfulBarChart,
    SimpleBarChart,

    },
  data () {
    return {
      stackChartData: {
        id: 'parking_space_id',
        xAxisData: ['9-23', '9-23', '9-23', '9-23', '9-23', '9-23'],
        legend: ['总数量', '占用数', '空闲数'],
        data: [
          {name: '空闲数', data: [45, 45, 45, 45, 45, 45], color: '#d5384d', zlevel: 10},
          {name: '占用数', data: [34, 34, 34, 34, 34, 34], color: '#ff9e00', zlevel: 5},
          {name: '总数量', data: [100, 80, 100, 90, 140, 100], color: '#0468f1', zlevel: 0}
        ]
      },
      simpleBarChartData: {
        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
        data:[320, 302, 301, 334, 390, 330, 320]
      },
      simpleLineChartData:{
        id: 'traffic_govern_line_id',
        width: 0,
        height: 0,
        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
        data: [
          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
        ]
      },
      rectWaterConfig:{
        data: [50],
        waveHeight:20,
        shape: 'roundRect'
      },
      roundWaterConfig:{
        data: [50],
        waveHeight:10,
        shape: 'round'
      },
      liquidFillConfig:{
        data:[0.5]
      }
    }
  },
  mounted () {
    // this.changeData()
  },
  methods: {
    //自动数字变换
    changeData () {
      setInterval(() => {
        const data = +this.digitalFlopConfig.data + 1
        this.digitalFlopConfig.data = data

        const data2 = this.digitalFlopConfig2.number[0] +5
        this.digitalFlopConfig2={
          number: [data2],
          toFixed: 2,
          content: '{nt}个'
        }
      }, 1000)
      // const data = Math.floor(Math.random() * (9999999 - 100)) + 100
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .router-view{
    top:0px !important;
  }
  .container{
    top:0px !important;
    background: url("../../assets/images/background1.jpg") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-color: black;
    .example-row{
      width:100%;
      height:220px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .example-block{
        width:220px;
        height: 100%;
        /*height:100px;*/
        padding: 0.1rem;
        border: 1px solid dodgerblue;
      }
    }
  }

</style>