<!--
 * @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-pie-chart
          id="piechart1"
          :colors="colorThemes.theme1"
          :series-data="simplePieChartData.data"
        />
      </div>
      <div class="example-block">
        <simple-pie-chart
          id="piechart2"
          :colors="colorThemes.theme2"
          font-family="DS-DigitalBold"
          value-type="value"
          :radius="['0%','55%']"
          :series-data="simplePieChartData.data"
        />
      </div>
      <div class="example-block">
        <simple-pie-chart
          id="piechart3"
          rose-type="area"
          :radius="['0%','45%']"
          :series-data="simplePieChartData.data"
        />
      </div>
      <div class="example-block">
        <simple-scatter-chart
          :series-data="simpleScatterChartData.data"/>

      </div>
      <div class="example-block">

      </div>
      <div class="example-block">

      </div>
    </div>
    <div class="example-row">
      <div class="example-block">

      </div>
      <div class="example-block">

      </div>
      <div class="example-block">

      </div>
      <div class="example-block">

      </div>
      <div class="example-block">

      </div>
      <div class="example-block">

      </div>
    </div>
    <div class="example-row">
      <div class="example-block">

      </div>
      <div class="example-block">

      </div>
      <div class="example-block">

      </div>
      <div class="example-block" style="display:flex;flex-wrap:wrap;">

      </div>
      <div class="example-block" style="display:flex;flex-wrap:wrap;">

      </div>
    </div>
  </div>

</template>

<script>

import SimplePieChart from "../../components/pieChart/simplePieChart";
import SimpleScatterChart from "../../components/scatterChart/simpleScatterChart";
export default {
  name: 'ExamplePie',
  components: {
    SimpleScatterChart,
    SimplePieChart
    },
  data () {
    return {
      colorThemes:{
        theme1:['#ffa510','#0c84c6','#ffbd66','#f74d4d','#2455a4','#41b7ac'],
        theme2:['#05f8d6','#0082fc','#fdd845','#22ed7c','#09b0d3','#1d27c9','#f9e264','#f47a75','#009db2','#024b51','#0780cf','#765005​​​​​​​'],
        theme3:['#e75840','#a565ef','#628cee','#eb9358','#d05c7c','#bb60b2','#433e7c','#f47a75','#009db2','#024b51','#0780cf','#765005​​​​​​​'],
        theme4:['#929fff','#9de0ff','#ffa897','#af87fe','#7dc3fe','#bb60b2','#433e7c','#f47a75','#009db2','#024b51','#0780cf','#765005​​​​​​​'],
        theme5:['#50c48f','#26ccd8','#3685fe','#9977ef','#f5616f','#f7b13f','#f9e264','#f47a75','#009db2','#024b51','#0780cf','#765005​​​​​​​'],
        theme6:['#95a2ff','#fa8080','#ffc076','#fae768','#87e885','#3cb9fc','#73abf5','#cb9bff','#434348','#90ed7d','#f7a35c','#8085e9'],
        theme7:['#9489fa','#f06464','#f7af59','#f0da49','#71c16f','#2aaaef','#5690dd','#bd88f5','#434348','#009db2','#024b51','#0780cf']
      },
      simplePieChartData: {
        colors:['#002c53','#ffa510','#0c84c6','#ffbd66','#f74d4d','#2455a4','#41b7ac'],
        colors2:['#05f8d6','#0082fc','#fdd845','#22ed7c','#09b0d3','#1d27c9','#f9e264','#f47a75','#009db2','#024b51','#0780cf','#765005​​​​​​​'],
        data:[
          {value:24, name:'选项一'},
          {value:34, name:'选项二'},
          {value:50, name:'选项三'},
          {value:27, name:'选项四'},
          {value:68, name:'选项五'},
          {value:78, name:'选项六'}
        ]
      },
      simpleScatterChartData:{
        data:[
          [10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33], [14.0, 9.96], [6.0, 7.24], [4.0, 4.26], [12.0, 10.84], [7.0, 4.82], [5.0, 5.68]]
      }
    }
  },
  mounted () {
  },
  methods: {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .router-view{
    top:0px !important;
  }
  .container{
    top:0px !important;
    background: url("../../assets/images/background1.jpg") repeat-y;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-color: black;
    background-repeat: repeat-y;

    .example-row{
      width:100%;
      height:320px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .example-block{
        width:320px;
        height: 100%;
        /*height:100px;*/
        padding: 0.1rem;
        border: 1px solid dodgerblue;
      }
    }
  }

</style>