/**
* @Author Sean
* @Date 2019/5/8
*/
<template>
  <h-view class="public-style" style="height: 100%">
    <h-content>
      <div class="chart-wrapper">
        <div class="chart-type">散点图</div>
        <canvas id="scatterLine"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">气泡图</div>
        <canvas id="bubblesLine"></canvas>
      </div>

    </h-content>
  </h-view>
</template>

<script>
  export default {
    data() {
      return {
        scatterData: [
          {"gender": "female", "height": 161.2, "weight": 51.6}, {
          "gender": "female",
          "height": 167.5,
          "weight": 59
        }, {"gender": "female", "height": 159.5, "weight": 49.2}, {
          "gender": "female",
          "height": 157,
          "weight": 63
        }, {"gender": "female", "height": 155.8, "weight": 53.6}, {
          "gender": "female",
          "height": 170,
          "weight": 59
        }, {"gender": "female", "height": 159.1, "weight": 47.6}, {
          "gender": "female",
          "height": 166,
          "weight": 69.8
        }, {"gender": "female", "height": 176.2, "weight": 66.8}, {
          "gender": "female",
          "height": 160.2,
          "weight": 75.2
        }, {"gender": "female", "height": 172.5, "weight": 55.2}, {
          "gender": "female",
          "height": 170.9,
          "weight": 54.2
        }, {"gender": "female", "height": 172.9, "weight": 62.5}, {
          "gender": "female",
          "height": 153.4,
          "weight": 42
        }, {"gender": "female", "height": 160, "weight": 50}, {
          "gender": "female",
          "height": 147.2,
          "weight": 49.8
        }, {"gender": "female", "height": 168.2, "weight": 49.2}, {
          "gender": "female",
          "height": 175,
          "weight": 73.2
        }, {"gender": "female", "height": 157, "weight": 47.8}, {
          "gender": "female",
          "height": 167.6,
          "weight": 68.8
        }, {"gender": "female", "height": 159.5, "weight": 50.6}, {
          "gender": "female",
          "height": 175,
          "weight": 82.5
        }, {"gender": "female", "height": 166.8, "weight": 57.2}, {
          "gender": "female",
          "height": 176.5,
          "weight": 87.8
        }, {"gender": "female", "height": 170.2, "weight": 72.8}, {
          "gender": "female",
          "height": 174,
          "weight": 54.5
        }, {"gender": "female", "height": 173, "weight": 59.8}, {
          "gender": "female",
          "height": 179.9,
          "weight": 67.3
        }, {"gender": "female", "height": 170.5, "weight": 67.8}, {
          "gender": "female",
          "height": 160,
          "weight": 47
        }, {"gender": "female", "height": 154.4, "weight": 46.2}, {
          "gender": "female",
          "height": 162,
          "weight": 55
        }, {"gender": "female", "height": 176.5, "weight": 83}, {
          "gender": "female",
          "height": 160,
          "weight": 54.4
        }, {"gender": "female", "height": 152, "weight": 45.8}, {
          "gender": "female",
          "height": 162.1,
          "weight": 53.6
        }, {"gender": "female", "height": 170, "weight": 73.2}, {
          "gender": "female",
          "height": 160.2,
          "weight": 52.1
        }, {"gender": "female", "height": 161.3, "weight": 67.9}, {
          "gender": "female",
          "height": 166.4,
          "weight": 56.6
        }, {"gender": "female", "height": 168.9, "weight": 62.3}, {
          "gender": "female",
          "height": 163.8,
          "weight": 58.5
        }, {"gender": "female", "height": 167.6, "weight": 54.5}, {
          "gender": "female",
          "height": 160,
          "weight": 50.2
        }, {"gender": "female", "height": 161.3, "weight": 60.3}, {
          "gender": "female",
          "height": 167.6,
          "weight": 58.3
        }, {"gender": "female", "height": 165.1, "weight": 56.2}, {
          "gender": "female",
          "height": 160,
          "weight": 50.2
        }, {"gender": "female", "height": 170, "weight": 72.9}, {
          "gender": "female",
          "height": 157.5,
          "weight": 59.8
        }, {"gender": "female", "height": 167.6, "weight": 61}, {
          "gender": "female",
          "height": 160.7,
          "weight": 69.1
        }, {"gender": "female", "height": 163.2, "weight": 55.9}, {
          "gender": "female",
          "height": 152.4,
          "weight": 46.5
        }, {"gender": "female", "height": 157.5, "weight": 54.3}, {
          "gender": "female",
          "height": 168.3,
          "weight": 54.8
        }, {"gender": "female", "height": 180.3, "weight": 60.7}, {
          "gender": "female",
          "height": 165.5,
          "weight": 60
        }, {"gender": "female", "height": 165, "weight": 62}, {
          "gender": "female",
          "height": 164.5,
          "weight": 60.3
        }, {"gender": "female", "height": 156, "weight": 52.7}, {
          "gender": "female",
          "height": 160,
          "weight": 74.3
        }, {"gender": "female", "height": 163, "weight": 62}, {
          "gender": "female",
          "height": 165.7,
          "weight": 73.1
        }, {"gender": "female", "height": 161, "weight": 80}, {
          "gender": "female",
          "height": 162,
          "weight": 54.7
        }, {"gender": "female", "height": 166, "weight": 53.2}, {
          "gender": "female",
          "height": 174,
          "weight": 75.7
        }, {"gender": "female", "height": 172.7, "weight": 61.1}, {
          "gender": "female",
          "height": 167.6,
          "weight": 55.7
        }, {"gender": "female", "height": 151.1, "weight": 48.7}, {
          "gender": "female",
          "height": 164.5,
          "weight": 52.3
        }, {"gender": "female", "height": 163.5, "weight": 50}, {
          "gender": "female",
          "height": 152,
          "weight": 59.3
        }, {"gender": "female", "height": 169, "weight": 62.5}, {
          "gender": "female",
          "height": 164,
          "weight": 55.7
        }, {"gender": "female", "height": 161.2, "weight": 54.8}, {
          "gender": "female",
          "height": 155,
          "weight": 45.9
        }, {"gender": "female", "height": 170, "weight": 70.6}, {
          "gender": "female",
          "height": 176.2,
          "weight": 67.2
        }, {"gender": "female", "height": 170, "weight": 69.4}, {
          "gender": "female",
          "height": 162.5,
          "weight": 58.2
        }, {"gender": "female", "height": 170.3, "weight": 64.8}, {
          "gender": "female",
          "height": 164.1,
          "weight": 71.6
        }, {"gender": "female", "height": 169.5, "weight": 52.8}, {
          "gender": "female",
          "height": 163.2,
          "weight": 59.8
        }, {"gender": "female", "height": 154.5, "weight": 49}, {
          "gender": "female",
          "height": 159.8,
          "weight": 50
        }, {"gender": "female", "height": 173.2, "weight": 69.2}, {
          "gender": "female",
          "height": 170,
          "weight": 55.9
        }, {"gender": "female", "height": 161.4, "weight": 63.4}, {
          "gender": "female",
          "height": 169,
          "weight": 58.2
        }, {"gender": "female", "height": 166.2, "weight": 58.6}, {
          "gender": "female",
          "height": 159.4,
          "weight": 45.7
        }, {"gender": "female", "height": 162.5, "weight": 52.2}, {
          "gender": "female",
          "height": 159,
          "weight": 48.6
        }, {"gender": "female", "height": 162.8, "weight": 57.8}, {
          "gender": "female",
          "height": 159,
          "weight": 55.6
        }, {"gender": "female", "height": 179.8, "weight": 66.8}, {
          "gender": "female",
          "height": 162.9,
          "weight": 59.4
        }, {"gender": "female", "height": 161, "weight": 53.6}, {
          "gender": "female",
          "height": 151.1,
          "weight": 73.2
        }, {"gender": "female", "height": 168.2, "weight": 53.4}, {
          "gender": "female",
          "height": 168.9,
          "weight": 69
        }, {"gender": "female", "height": 173.2, "weight": 58.4}, {
          "gender": "female",
          "height": 171.8,
          "weight": 56.2
        }, {"gender": "female", "height": 178, "weight": 70.6}, {
          "gender": "female",
          "height": 164.3,
          "weight": 59.8
        }, {"gender": "female", "height": 163, "weight": 72}, {
          "gender": "female",
          "height": 168.5,
          "weight": 65.2
        }, {"gender": "female", "height": 166.8, "weight": 56.6}, {
          "gender": "female",
          "height": 172.7,
          "weight": 105.2
        }, {"gender": "female", "height": 163.5, "weight": 51.8}, {
          "gender": "female",
          "height": 169.4,
          "weight": 63.4
        }, {"gender": "female", "height": 167.8, "weight": 59}, {
          "gender": "female",
          "height": 159.5,
          "weight": 47.6
        }, {"gender": "female", "height": 167.6, "weight": 63}, {
          "gender": "female",
          "height": 161.2,
          "weight": 55.2
        }, {"gender": "female", "height": 160, "weight": 45}, {
          "gender": "female",
          "height": 163.2,
          "weight": 54
        }, {"gender": "female", "height": 162.2, "weight": 50.2}, {
          "gender": "female",
          "height": 161.3,
          "weight": 60.2
        }, {"gender": "female", "height": 149.5, "weight": 44.8}, {
          "gender": "female",
          "height": 157.5,
          "weight": 58.8
        }, {"gender": "female", "height": 163.2, "weight": 56.4}, {
          "gender": "female",
          "height": 172.7,
          "weight": 62
        }, {"gender": "female", "height": 155, "weight": 49.2}, {
          "gender": "female",
          "height": 156.5,
          "weight": 67.2
        }, {"gender": "female", "height": 164, "weight": 53.8}, {
          "gender": "female",
          "height": 160.9,
          "weight": 54.4
        }, {"gender": "female", "height": 162.8, "weight": 58}, {
          "gender": "female",
          "height": 167,
          "weight": 59.8
        }, {"gender": "female", "height": 160, "weight": 54.8}, {
          "gender": "female",
          "height": 160,
          "weight": 43.2
        }, {"gender": "female", "height": 168.9, "weight": 60.5}, {
          "gender": "female",
          "height": 158.2,
          "weight": 46.4
        }, {"gender": "female", "height": 156, "weight": 64.4}, {
          "gender": "female",
          "height": 160,
          "weight": 48.8
        }, {"gender": "female", "height": 167.1, "weight": 62.2}, {
          "gender": "female",
          "height": 158,
          "weight": 55.5
        }, {"gender": "female", "height": 167.6, "weight": 57.8}, {
          "gender": "female",
          "height": 156,
          "weight": 54.6
        }, {"gender": "female", "height": 162.1, "weight": 59.2}, {
          "gender": "female",
          "height": 173.4,
          "weight": 52.7
        }, {"gender": "female", "height": 159.8, "weight": 53.2}, {
          "gender": "female",
          "height": 170.5,
          "weight": 64.5
        }, {"gender": "female", "height": 159.2, "weight": 51.8}, {
          "gender": "female",
          "height": 157.5,
          "weight": 56
        }, {"gender": "female", "height": 161.3, "weight": 63.6}, {
          "gender": "female",
          "height": 162.6,
          "weight": 63.2
        }, {"gender": "female", "height": 160, "weight": 59.5}, {
          "gender": "female",
          "height": 168.9,
          "weight": 56.8
        }, {"gender": "female", "height": 165.1, "weight": 64.1}, {
          "gender": "female",
          "height": 162.6,
          "weight": 50
        }, {"gender": "female", "height": 165.1, "weight": 72.3}, {
          "gender": "female",
          "height": 166.4,
          "weight": 55
        }, {"gender": "female", "height": 160, "weight": 55.9}, {
          "gender": "female",
          "height": 152.4,
          "weight": 60.4
        }, {"gender": "female", "height": 170.2, "weight": 69.1}, {
          "gender": "female",
          "height": 162.6,
          "weight": 84.5
        }, {"gender": "female", "height": 170.2, "weight": 55.9}, {
          "gender": "female",
          "height": 158.8,
          "weight": 55.5
        }, {"gender": "female", "height": 172.7, "weight": 69.5}, {
          "gender": "female",
          "height": 167.6,
          "weight": 76.4
        }, {"gender": "female", "height": 162.6, "weight": 61.4}, {
          "gender": "female",
          "height": 167.6,
          "weight": 65.9
        }, {"gender": "female", "height": 156.2, "weight": 58.6}, {
          "gender": "female",
          "height": 175.2,
          "weight": 66.8
        }, {"gender": "female", "height": 172.1, "weight": 56.6}, {
          "gender": "female",
          "height": 162.6,
          "weight": 58.6
        }, {"gender": "female", "height": 160, "weight": 55.9}, {
          "gender": "female",
          "height": 165.1,
          "weight": 59.1
        }, {"gender": "female", "height": 182.9, "weight": 81.8}, {
          "gender": "female",
          "height": 166.4,
          "weight": 70.7
        }, {"gender": "female", "height": 165.1, "weight": 56.8}, {
          "gender": "female",
          "height": 177.8,
          "weight": 60
        }, {"gender": "female", "height": 165.1, "weight": 58.2}, {
          "gender": "female",
          "height": 175.3,
          "weight": 72.7
        }, {"gender": "female", "height": 154.9, "weight": 54.1}, {
          "gender": "female",
          "height": 158.8,
          "weight": 49.1
        }, {"gender": "female", "height": 172.7, "weight": 75.9}, {
          "gender": "female",
          "height": 168.9,
          "weight": 55
        }, {"gender": "female", "height": 161.3, "weight": 57.3}, {
          "gender": "female",
          "height": 167.6,
          "weight": 55
        }, {"gender": "female", "height": 165.1, "weight": 65.5}, {
          "gender": "female",
          "height": 175.3,
          "weight": 65.5
        }, {"gender": "female", "height": 157.5, "weight": 48.6}, {
          "gender": "female",
          "height": 163.8,
          "weight": 58.6
        }, {"gender": "female", "height": 167.6, "weight": 63.6}, {
          "gender": "female",
          "height": 165.1,
          "weight": 55.2
        }, {"gender": "female", "height": 165.1, "weight": 62.7}, {
          "gender": "female",
          "height": 168.9,
          "weight": 56.6
        }, {"gender": "female", "height": 162.6, "weight": 53.9}, {
          "gender": "female",
          "height": 164.5,
          "weight": 63.2
        }, {"gender": "female", "height": 176.5, "weight": 73.6}, {
          "gender": "female",
          "height": 168.9,
          "weight": 62
        }, {"gender": "female", "height": 175.3, "weight": 63.6}, {
          "gender": "female",
          "height": 159.4,
          "weight": 53.2
        }, {"gender": "female", "height": 160, "weight": 53.4}, {
          "gender": "female",
          "height": 170.2,
          "weight": 55
        }, {"gender": "female", "height": 162.6, "weight": 70.5}, {
          "gender": "female",
          "height": 167.6,
          "weight": 54.5
        }, {"gender": "female", "height": 162.6, "weight": 54.5}, {
          "gender": "female",
          "height": 160.7,
          "weight": 55.9
        }, {"gender": "female", "height": 160, "weight": 59}, {
          "gender": "female",
          "height": 157.5,
          "weight": 63.6
        }, {"gender": "female", "height": 162.6, "weight": 54.5}, {
          "gender": "female",
          "height": 152.4,
          "weight": 47.3
        }, {"gender": "female", "height": 170.2, "weight": 67.7}, {
          "gender": "female",
          "height": 165.1,
          "weight": 80.9
        }, {"gender": "female", "height": 172.7, "weight": 70.5}, {
          "gender": "female",
          "height": 165.1,
          "weight": 60.9
        }, {"gender": "female", "height": 170.2, "weight": 63.6}, {
          "gender": "female",
          "height": 170.2,
          "weight": 54.5
        }, {"gender": "female", "height": 170.2, "weight": 59.1}, {
          "gender": "female",
          "height": 161.3,
          "weight": 70.5
        }, {"gender": "female", "height": 167.6, "weight": 52.7}, {
          "gender": "female",
          "height": 167.6,
          "weight": 62.7
        }, {"gender": "female", "height": 165.1, "weight": 86.3}, {
          "gender": "female",
          "height": 162.6,
          "weight": 66.4
        }, {"gender": "female", "height": 152.4, "weight": 67.3}, {
          "gender": "female",
          "height": 168.9,
          "weight": 63
        }, {"gender": "female", "height": 170.2, "weight": 73.6}, {
          "gender": "female",
          "height": 175.2,
          "weight": 62.3
        }, {"gender": "female", "height": 175.2, "weight": 57.7}, {
          "gender": "female",
          "height": 160,
          "weight": 55.4
        }, {"gender": "female", "height": 165.1, "weight": 104.1}, {
          "gender": "female",
          "height": 174,
          "weight": 55.5
        }, {"gender": "female", "height": 170.2, "weight": 77.3}, {
          "gender": "female",
          "height": 160,
          "weight": 80.5
        }, {"gender": "female", "height": 167.6, "weight": 64.5}, {
          "gender": "female",
          "height": 167.6,
          "weight": 72.3
        }, {"gender": "female", "height": 167.6, "weight": 61.4}, {
          "gender": "female",
          "height": 154.9,
          "weight": 58.2
        }, {"gender": "female", "height": 162.6, "weight": 81.8}, {
          "gender": "female",
          "height": 175.3,
          "weight": 63.6
        }, {"gender": "female", "height": 171.4, "weight": 53.4}, {
          "gender": "female",
          "height": 157.5,
          "weight": 54.5
        }, {"gender": "female", "height": 165.1, "weight": 53.6}, {
          "gender": "female",
          "height": 160,
          "weight": 60
        }, {"gender": "female", "height": 174, "weight": 73.6}, {
          "gender": "female",
          "height": 162.6,
          "weight": 61.4
        }, {"gender": "female", "height": 174, "weight": 55.5}, {
          "gender": "female",
          "height": 162.6,
          "weight": 63.6
        }, {"gender": "female", "height": 161.3, "weight": 60.9}, {
          "gender": "female",
          "height": 156.2,
          "weight": 60
        }, {"gender": "female", "height": 149.9, "weight": 46.8}, {
          "gender": "female",
          "height": 169.5,
          "weight": 57.3
        }, {"gender": "female", "height": 160, "weight": 64.1}, {
          "gender": "female",
          "height": 175.3,
          "weight": 63.6
        }, {"gender": "female", "height": 169.5, "weight": 67.3}, {
          "gender": "female",
          "height": 160,
          "weight": 75.5
        }, {"gender": "female", "height": 172.7, "weight": 68.2}, {
          "gender": "female",
          "height": 162.6,
          "weight": 61.4
        }, {"gender": "female", "height": 157.5, "weight": 76.8}, {
          "gender": "female",
          "height": 176.5,
          "weight": 71.8
        }, {"gender": "female", "height": 164.4, "weight": 55.5}, {
          "gender": "female",
          "height": 160.7,
          "weight": 48.6
        }, {"gender": "female", "height": 174, "weight": 66.4}, {
          "gender": "female",
          "height": 163.8,
          "weight": 67.3
        }, {"gender": "male", "height": 174, "weight": 65.6}, {
          "gender": "male",
          "height": 175.3,
          "weight": 71.8
        }, {"gender": "male", "height": 193.5, "weight": 80.7}, {
          "gender": "male",
          "height": 186.5,
          "weight": 72.6
        }, {"gender": "male", "height": 187.2, "weight": 78.8}, {
          "gender": "male",
          "height": 181.5,
          "weight": 74.8
        }, {"gender": "male", "height": 184, "weight": 86.4}, {
          "gender": "male",
          "height": 184.5,
          "weight": 78.4
        }, {"gender": "male", "height": 175, "weight": 62}, {
          "gender": "male",
          "height": 184,
          "weight": 81.6
        }, {"gender": "male", "height": 180, "weight": 76.6}, {
          "gender": "male",
          "height": 177.8,
          "weight": 83.6
        }, {"gender": "male", "height": 192, "weight": 90}, {
          "gender": "male",
          "height": 176,
          "weight": 74.6
        }, {"gender": "male", "height": 174, "weight": 71}, {
          "gender": "male",
          "height": 184,
          "weight": 79.6
        }, {"gender": "male", "height": 192.7, "weight": 93.8}, {
          "gender": "male",
          "height": 171.5,
          "weight": 70
        }, {"gender": "male", "height": 173, "weight": 72.4}, {
          "gender": "male",
          "height": 176,
          "weight": 85.9
        }, {"gender": "male", "height": 176, "weight": 78.8}, {
          "gender": "male",
          "height": 180.5,
          "weight": 77.8
        }, {"gender": "male", "height": 172.7, "weight": 66.2}, {
          "gender": "male",
          "height": 176,
          "weight": 86.4
        }, {"gender": "male", "height": 173.5, "weight": 81.8}, {
          "gender": "male",
          "height": 178,
          "weight": 89.6
        }, {"gender": "male", "height": 180.3, "weight": 82.8}, {
          "gender": "male",
          "height": 180.3,
          "weight": 76.4
        }, {"gender": "male", "height": 164.5, "weight": 63.2}, {
          "gender": "male",
          "height": 173,
          "weight": 60.9
        }, {"gender": "male", "height": 183.5, "weight": 74.8}, {
          "gender": "male",
          "height": 175.5,
          "weight": 70
        }, {"gender": "male", "height": 188, "weight": 72.4}, {
          "gender": "male",
          "height": 189.2,
          "weight": 84.1
        }, {"gender": "male", "height": 172.8, "weight": 69.1}, {
          "gender": "male",
          "height": 170,
          "weight": 59.5
        }, {"gender": "male", "height": 182, "weight": 67.2}, {
          "gender": "male",
          "height": 170,
          "weight": 61.3
        }, {"gender": "male", "height": 177.8, "weight": 68.6}, {
          "gender": "male",
          "height": 184.2,
          "weight": 80.1
        }, {"gender": "male", "height": 186.7, "weight": 87.8}, {
          "gender": "male",
          "height": 171.4,
          "weight": 84.7
        }, {"gender": "male", "height": 172.7, "weight": 73.4}, {
          "gender": "male",
          "height": 175.3,
          "weight": 72.1
        }, {"gender": "male", "height": 180.3, "weight": 82.6}, {
          "gender": "male",
          "height": 182.9,
          "weight": 88.7
        }, {"gender": "male", "height": 188, "weight": 84.1}, {
          "gender": "male",
          "height": 177.2,
          "weight": 94.1
        }, {"gender": "male", "height": 172.1, "weight": 74.9}, {
          "gender": "male",
          "height": 167,
          "weight": 59.1
        }, {"gender": "male", "height": 169.5, "weight": 75.6}, {
          "gender": "male",
          "height": 174,
          "weight": 86.2
        }, {"gender": "male", "height": 172.7, "weight": 75.3}, {
          "gender": "male",
          "height": 182.2,
          "weight": 87.1
        }, {"gender": "male", "height": 164.1, "weight": 55.2}, {
          "gender": "male",
          "height": 163,
          "weight": 57
        }, {"gender": "male", "height": 171.5, "weight": 61.4}, {
          "gender": "male",
          "height": 184.2,
          "weight": 76.8
        }, {"gender": "male", "height": 174, "weight": 86.8}, {
          "gender": "male",
          "height": 174,
          "weight": 72.2
        }, {"gender": "male", "height": 177, "weight": 71.6}, {
          "gender": "male",
          "height": 186,
          "weight": 84.8
        }, {"gender": "male", "height": 167, "weight": 68.2}, {
          "gender": "male",
          "height": 171.8,
          "weight": 66.1
        }, {"gender": "male", "height": 182, "weight": 72}, {
          "gender": "male",
          "height": 167,
          "weight": 64.6
        }, {"gender": "male", "height": 177.8, "weight": 74.8}, {
          "gender": "male",
          "height": 164.5,
          "weight": 70
        }, {"gender": "male", "height": 192, "weight": 101.6}, {
          "gender": "male",
          "height": 175.5,
          "weight": 63.2
        }, {"gender": "male", "height": 171.2, "weight": 79.1}, {
          "gender": "male",
          "height": 181.6,
          "weight": 78.9
        }, {"gender": "male", "height": 167.4, "weight": 67.7}, {
          "gender": "male",
          "height": 181.1,
          "weight": 66
        }, {"gender": "male", "height": 177, "weight": 68.2}, {
          "gender": "male",
          "height": 174.5,
          "weight": 63.9
        }, {"gender": "male", "height": 177.5, "weight": 72}, {
          "gender": "male",
          "height": 170.5,
          "weight": 56.8
        }, {"gender": "male", "height": 182.4, "weight": 74.5}, {
          "gender": "male",
          "height": 197.1,
          "weight": 90.9
        }, {"gender": "male", "height": 180.1, "weight": 93}, {
          "gender": "male",
          "height": 175.5,
          "weight": 80.9
        }, {"gender": "male", "height": 180.6, "weight": 72.7}, {
          "gender": "male",
          "height": 184.4,
          "weight": 68
        }, {"gender": "male", "height": 175.5, "weight": 70.9}, {
          "gender": "male",
          "height": 180.6,
          "weight": 72.5
        }, {"gender": "male", "height": 177, "weight": 72.5}, {
          "gender": "male",
          "height": 177.1,
          "weight": 83.4
        }, {"gender": "male", "height": 181.6, "weight": 75.5}, {
          "gender": "male",
          "height": 176.5,
          "weight": 73
        }, {"gender": "male", "height": 175, "weight": 70.2}, {
          "gender": "male",
          "height": 174,
          "weight": 73.4
        }, {"gender": "male", "height": 165.1, "weight": 70.5}, {
          "gender": "male",
          "height": 177,
          "weight": 68.9
        }, {"gender": "male", "height": 192, "weight": 102.3}, {
          "gender": "male",
          "height": 176.5,
          "weight": 68.4
        }, {"gender": "male", "height": 169.4, "weight": 65.9}, {
          "gender": "male",
          "height": 182.1,
          "weight": 75.7
        }, {"gender": "male", "height": 179.8, "weight": 84.5}, {
          "gender": "male",
          "height": 175.3,
          "weight": 87.7
        }, {"gender": "male", "height": 184.9, "weight": 86.4}, {
          "gender": "male",
          "height": 177.3,
          "weight": 73.2
        }, {"gender": "male", "height": 167.4, "weight": 53.9}, {
          "gender": "male",
          "height": 178.1,
          "weight": 72
        }, {"gender": "male", "height": 168.9, "weight": 55.5}, {
          "gender": "male",
          "height": 157.2,
          "weight": 58.4
        }, {"gender": "male", "height": 180.3, "weight": 83.2}, {
          "gender": "male",
          "height": 170.2,
          "weight": 72.7
        }, {"gender": "male", "height": 177.8, "weight": 64.1}, {
          "gender": "male",
          "height": 172.7,
          "weight": 72.3
        }, {"gender": "male", "height": 165.1, "weight": 65}, {
          "gender": "male",
          "height": 186.7,
          "weight": 86.4
        }, {"gender": "male", "height": 165.1, "weight": 65}, {
          "gender": "male",
          "height": 174,
          "weight": 88.6
        }, {"gender": "male", "height": 175.3, "weight": 84.1}, {
          "gender": "male",
          "height": 185.4,
          "weight": 66.8
        }, {"gender": "male", "height": 177.8, "weight": 75.5}, {
          "gender": "male",
          "height": 180.3,
          "weight": 93.2
        }, {"gender": "male", "height": 180.3, "weight": 82.7}, {
          "gender": "male",
          "height": 177.8,
          "weight": 58
        }, {"gender": "male", "height": 177.8, "weight": 79.5}, {
          "gender": "male",
          "height": 177.8,
          "weight": 78.6
        }, {"gender": "male", "height": 177.8, "weight": 71.8}, {
          "gender": "male",
          "height": 177.8,
          "weight": 116.4
        }, {"gender": "male", "height": 163.8, "weight": 72.2}, {
          "gender": "male",
          "height": 188,
          "weight": 83.6
        }, {"gender": "male", "height": 198.1, "weight": 85.5}, {
          "gender": "male",
          "height": 175.3,
          "weight": 90.9
        }, {"gender": "male", "height": 166.4, "weight": 85.9}, {
          "gender": "male",
          "height": 190.5,
          "weight": 89.1
        }, {"gender": "male", "height": 166.4, "weight": 75}, {
          "gender": "male",
          "height": 177.8,
          "weight": 77.7
        }, {"gender": "male", "height": 179.7, "weight": 86.4}, {
          "gender": "male",
          "height": 172.7,
          "weight": 90.9
        }, {"gender": "male", "height": 190.5, "weight": 73.6}, {
          "gender": "male",
          "height": 185.4,
          "weight": 76.4
        }, {"gender": "male", "height": 168.9, "weight": 69.1}, {
          "gender": "male",
          "height": 167.6,
          "weight": 84.5
        }, {"gender": "male", "height": 175.3, "weight": 64.5}, {
          "gender": "male",
          "height": 170.2,
          "weight": 69.1
        }, {"gender": "male", "height": 190.5, "weight": 108.6}, {
          "gender": "male",
          "height": 177.8,
          "weight": 86.4
        }, {"gender": "male", "height": 190.5, "weight": 80.9}, {
          "gender": "male",
          "height": 177.8,
          "weight": 87.7
        }, {"gender": "male", "height": 184.2, "weight": 94.5}, {
          "gender": "male",
          "height": 176.5,
          "weight": 80.2
        }, {"gender": "male", "height": 177.8, "weight": 72}, {
          "gender": "male",
          "height": 180.3,
          "weight": 71.4
        }, {"gender": "male", "height": 171.4, "weight": 72.7}, {
          "gender": "male",
          "height": 172.7,
          "weight": 84.1
        }, {"gender": "male", "height": 172.7, "weight": 76.8}, {
          "gender": "male",
          "height": 177.8,
          "weight": 63.6
        }, {"gender": "male", "height": 177.8, "weight": 80.9}, {
          "gender": "male",
          "height": 182.9,
          "weight": 80.9
        }, {"gender": "male", "height": 170.2, "weight": 85.5}, {
          "gender": "male",
          "height": 167.6,
          "weight": 68.6
        }, {"gender": "male", "height": 175.3, "weight": 67.7}, {
          "gender": "male",
          "height": 165.1,
          "weight": 66.4
        }, {"gender": "male", "height": 185.4, "weight": 102.3}, {
          "gender": "male",
          "height": 181.6,
          "weight": 70.5
        }, {"gender": "male", "height": 172.7, "weight": 95.9}, {
          "gender": "male",
          "height": 190.5,
          "weight": 84.1
        }, {"gender": "male", "height": 179.1, "weight": 87.3}, {
          "gender": "male",
          "height": 175.3,
          "weight": 71.8
        }, {"gender": "male", "height": 170.2, "weight": 65.9}, {
          "gender": "male",
          "height": 193,
          "weight": 95.9
        }, {"gender": "male", "height": 171.4, "weight": 91.4}, {
          "gender": "male",
          "height": 177.8,
          "weight": 81.8
        }, {"gender": "male", "height": 177.8, "weight": 96.8}, {
          "gender": "male",
          "height": 167.6,
          "weight": 69.1
        }, {"gender": "male", "height": 167.6, "weight": 82.7}, {
          "gender": "male",
          "height": 180.3,
          "weight": 75.5
        }, {"gender": "male", "height": 182.9, "weight": 79.5}, {
          "gender": "male",
          "height": 176.5,
          "weight": 73.6
        }, {"gender": "male", "height": 186.7, "weight": 91.8}, {
          "gender": "male",
          "height": 188,
          "weight": 84.1
        }, {"gender": "male", "height": 188, "weight": 85.9}, {
          "gender": "male",
          "height": 177.8,
          "weight": 81.8
        }, {"gender": "male", "height": 174, "weight": 82.5}, {
          "gender": "male",
          "height": 177.8,
          "weight": 80.5
        }, {"gender": "male", "height": 171.4, "weight": 70}, {
          "gender": "male",
          "height": 185.4,
          "weight": 81.8
        }, {"gender": "male", "height": 185.4, "weight": 84.1}, {
          "gender": "male",
          "height": 188,
          "weight": 90.5
        }, {"gender": "male", "height": 188, "weight": 91.4}, {
          "gender": "male",
          "height": 182.9,
          "weight": 89.1
        }, {"gender": "male", "height": 176.5, "weight": 85}, {
          "gender": "male",
          "height": 175.3,
          "weight": 69.1
        }, {"gender": "male", "height": 175.3, "weight": 73.6}, {
          "gender": "male",
          "height": 188,
          "weight": 80.5
        }, {"gender": "male", "height": 188, "weight": 82.7}, {
          "gender": "male",
          "height": 175.3,
          "weight": 86.4
        }, {"gender": "male", "height": 170.5, "weight": 67.7}, {
          "gender": "male",
          "height": 179.1,
          "weight": 92.7
        }, {"gender": "male", "height": 177.8, "weight": 93.6}, {
          "gender": "male",
          "height": 175.3,
          "weight": 70.9
        }, {"gender": "male", "height": 182.9, "weight": 75}, {
          "gender": "male",
          "height": 170.8,
          "weight": 93.2
        }, {"gender": "male", "height": 188, "weight": 93.2}, {
          "gender": "male",
          "height": 180.3,
          "weight": 77.7
        }, {"gender": "male", "height": 177.8, "weight": 61.4}, {
          "gender": "male",
          "height": 185.4,
          "weight": 94.1
        }, {"gender": "male", "height": 168.9, "weight": 75}, {
          "gender": "male",
          "height": 185.4,
          "weight": 83.6
        }, {"gender": "male", "height": 180.3, "weight": 85.5}, {
          "gender": "male",
          "height": 174,
          "weight": 73.9
        }, {"gender": "male", "height": 167.6, "weight": 66.8}, {
          "gender": "male",
          "height": 182.9,
          "weight": 87.3
        }, {"gender": "male", "height": 160, "weight": 72.3}, {
          "gender": "male",
          "height": 180.3,
          "weight": 88.6
        }, {"gender": "male", "height": 167.6, "weight": 75.5}, {
          "gender": "male",
          "height": 186.7,
          "weight": 101.4
        }, {"gender": "male", "height": 175.3, "weight": 91.1}, {
          "gender": "male",
          "height": 175.3,
          "weight": 67.3
        }, {"gender": "male", "height": 175.9, "weight": 77.7}, {
          "gender": "male",
          "height": 175.3,
          "weight": 81.8
        }, {"gender": "male", "height": 179.1, "weight": 75.5}, {
          "gender": "male",
          "height": 181.6,
          "weight": 84.5
        }, {"gender": "male", "height": 177.8, "weight": 76.6}, {
          "gender": "male",
          "height": 182.9,
          "weight": 85
        }, {"gender": "male", "height": 177.8, "weight": 102.5}, {
          "gender": "male",
          "height": 184.2,
          "weight": 77.3
        }, {"gender": "male", "height": 179.1, "weight": 71.8}, {
          "gender": "male",
          "height": 176.5,
          "weight": 87.9
        }, {"gender": "male", "height": 188, "weight": 94.3}, {
          "gender": "male",
          "height": 174,
          "weight": 70.9
        }, {"gender": "male", "height": 167.6, "weight": 64.5}, {
          "gender": "male",
          "height": 170.2,
          "weight": 77.3
        }, {"gender": "male", "height": 167.6, "weight": 72.3}, {
          "gender": "male",
          "height": 188,
          "weight": 87.3
        }, {"gender": "male", "height": 174, "weight": 80}, {
          "gender": "male",
          "height": 176.5,
          "weight": 82.3
        }, {"gender": "male", "height": 180.3, "weight": 73.6}, {
          "gender": "male",
          "height": 167.6,
          "weight": 74.1
        }, {"gender": "male", "height": 188, "weight": 85.9}, {
          "gender": "male",
          "height": 180.3,
          "weight": 73.2
        }, {"gender": "male", "height": 167.6, "weight": 76.3}, {
          "gender": "male",
          "height": 183,
          "weight": 65.9
        }, {"gender": "male", "height": 183, "weight": 90.9}, {
          "gender": "male",
          "height": 179.1,
          "weight": 89.1
        }, {"gender": "male", "height": 170.2, "weight": 62.3}, {
          "gender": "male",
          "height": 177.8,
          "weight": 82.7
        }, {"gender": "male", "height": 179.1, "weight": 79.1}, {
          "gender": "male",
          "height": 190.5,
          "weight": 98.2
        }, {"gender": "male", "height": 177.8, "weight": 84.1}, {
          "gender": "male",
          "height": 180.3,
          "weight": 83.2
        }, {"gender": "male", "height": 180.3, "weight": 83.2}],
        bubblesData: [
          {
          x: 95,
          y: 95,
          z: 13.8,
          name: 'BE',
          country: 'Belgium'
        }, {
          x: 86.5,
          y: 102.9,
          z: 14.7,
          name: 'DE',
          country: 'Germany'
        }, {
          x: 80.8,
          y: 91.5,
          z: 15.8,
          name: 'FI',
          country: 'Finland'
        }, {
          x: 80.4,
          y: 102.5,
          z: 12,
          name: 'NL',
          country: 'Netherlands'
        }, {
          x: 80.3,
          y: 86.1,
          z: 11.8,
          name: 'SE',
          country: 'Sweden'
        }, {
          x: 78.4,
          y: 70.1,
          z: 16.6,
          name: 'ES',
          country: 'Spain'
        }, {
          x: 74.2,
          y: 68.5,
          z: 14.5,
          name: 'FR',
          country: 'France'
        }, {
          x: 73.5,
          y: 83.1,
          z: 10,
          name: 'NO',
          country: 'Norway'
        }, {
          x: 71,
          y: 93.2,
          z: 24.7,
          name: 'UK',
          country: 'United Kingdom'
        }, {
          x: 69.2,
          y: 57.6,
          z: 10.4,
          name: 'IT',
          country: 'Italy'
        }, {
          x: 68.6,
          y: 20,
          z: 16,
          name: 'RU',
          country: 'Russia'
        }, {
          x: 65.5,
          y: 126.4,
          z: 35.3,
          name: 'US',
          country: 'United States'
        }, {
          x: 65.4,
          y: 50.8,
          z: 28.5,
          name: 'HU',
          country: 'Hungary'
        }, {
          x: 63.4,
          y: 51.8,
          z: 15.4,
          name: 'PT',
          country: 'Portugal'
        }, {
          x: 64,
          y: 82.9,
          z: 31.3,
          name: 'NZ',
          country: 'New Zealand'
        }],
      }
    },
    created: function () {
    },
    mounted: function () {
      this.scatterLine();//散点图
      this.bubblesLine();//气泡
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      scatterLine(){
        var chart = new F2.Chart({
          id: 'scatterLine',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.scatterData, {
          height: {
            tickCount: 5
          },
          weight: {
            tickCount: 5
          }
        });
        chart.axis('height', {
          label: function label(text, index, total) {
            var textCfg = {};
            if (index === 0) {
              textCfg.textAlign = 'left';
            } else if (index === total - 1) {
              textCfg.textAlign = 'right';
            }
            return textCfg;
          }
        });
        chart.tooltip(false);
        chart.point().position('height*weight').color('gender').style({
          fillOpacity: 0.65
        });
        chart.render();
      },
      bubblesLine(){
        var chart = new F2.Chart({
          id: 'bubblesLine',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.bubblesData, {
          x: {
            alias: 'Daily fat intake', // 定义别名
            tickInterval: 5, // 自定义刻度间距
            nice: false, // 不对最大最小值优化
            max: 96, // 自定义最大值
            min: 62 // 自定义最小是
          },
          y: {
            alias: 'Daily sugar intake',
            tickInterval: 50,
            nice: false,
            max: 165,
            min: 0
          },
          z: {
            alias: 'Obesity(adults) %'
          }
        });
        // 开始配置坐标轴
        chart.axis('x', {
          label: function label(text) {
            return {
              text: text + ' gr' // 格式化坐标轴显示文本
            };
          },
          grid: {
            stroke: '#d9d9d9',
            lineWidth: 1,
            lineDash: [2, 2]
          }
        });
        chart.axis('y', {
          line: F2.Util.mix({}, F2.Global._defaultAxis.line, {
            top: false
          }),
          label: function label(text) {
            if (text > 0) {
              return {
                text: text + ' gr'
              };
            }
          }
        });
        chart.tooltip(false);
        chart.point().position('x*y').color('#1890ff').size('z', [10, 40]).shape('circle').style({
          lineWidth: 1,
          stroke: '#1890ff',
          opacity: 0.3
        });

        // 绘制辅助文本
        this.bubblesData.map(function(item) {
          chart.guide().text({
            position: [item.x, item.y],
            content: item.name,
            style: {
              textAlign: 'center',
              textBaseline: 'middle',
              fill: '#1890FF'
            }
          });
        });
        chart.render();
      }
    }
  }
</script>

<style scoped lang="less" rel="stylesheet">
  .public-style {
    .content {
      .chart-wrapper {
        .chart-type {
          width: 100%;
          height: 30px;
          font-size: 16px;
          color: #7b7b7b;
          display: flex;
          display: -webkit-flex;
          justify-content: center;
          -webkit-justify-content: center;
          align-items: center;
          -webkit-align-items: center;
        }

        canvas {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
