/**
* @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="basicArea"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">带负值面积图</div>
        <canvas id="negativeArea"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">区域图</div>
        <canvas id="nullArea"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">层叠面积图</div>
        <canvas id="cascadingArea"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">面积图对比</div>
        <canvas id="contrastArea"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">渐变填充面积图</div>
        <canvas id="gradientArea"></canvas>
      </div>
    </h-content>
  </h-view>
</template>

<script>
  export default {
    data() {
      return {
        basicData: [
          {
            time: 'Jan.',
            tem: 1000
          }, {
            time: 'Feb.',
            tem: 2200
          }, {
            time: 'Mar.',
            tem: 2000
          }, {
            time: 'Apr.',
            tem: 2600
          }, {
            time: 'May.',
            tem: 2000
          }, {
            time: 'Jun.',
            tem: 2600
          }, {
            time: 'Jul.',
            tem: 2800
          }, {
            time: 'Aug.',
            tem: 2000
          }],
        negativeData: [
          {
            month: 'Jan.',
            value: 6.06
          }, {
            month: 'Feb.',
            value: 82.2
          }, {
            month: 'Mar.',
            value: -22.11
          }, {
            month: 'Apr.',
            value: 21.53
          }, {
            month: 'May.',
            value: -21.74
          }, {
            month: 'Jun.',
            value: 73.61
          }, {
            month: 'Jul.',
            value: 53.75
          }, {
            month: 'Aug.',
            value: 60.32
          }],
        nullData: [
          {"year": "1986", "type": "ACME", "value": 162},
          {
            "year": "1986",
            "type": "Compitor",
            "value": 42
          }, {"year": "1987", "type": "ACME", "value": 134}, {
            "year": "1987",
            "type": "Compitor",
            "value": 54
          }, {"year": "1988", "type": "ACME", "value": 116}, {
            "year": "1988",
            "type": "Compitor",
            "value": 26
          }, {"year": "1989", "type": "ACME", "value": 122}, {
            "year": "1989",
            "type": "Compitor",
            "value": 32
          }, {"year": "1990", "type": "ACME", "value": 178}, {
            "year": "1990",
            "type": "Compitor",
            "value": 68
          }, {"year": "1991", "type": "ACME", "value": 144}, {
            "year": "1991",
            "type": "Compitor",
            "value": 54
          }, {"year": "1992", "type": "ACME", "value": 125}, {
            "year": "1992",
            "type": "Compitor",
            "value": 35
          }, {"year": "1993", "type": "ACME", "value": 176}, {
            "year": "1993",
            "type": "Compitor",
            "value": 66
          }, {"year": "1994", "type": "ACME", "value": 156}, {"year": "1994", "type": "Compitor"}, {
            "year": "1995",
            "type": "ACME",
            "value": 195
          }, {"year": "1995", "type": "Compitor"}, {"year": "1996", "type": "ACME", "value": 215}, {
            "year": "1996",
            "type": "Compitor"
          }, {"year": "1997", "type": "ACME", "value": 176}, {
            "year": "1997",
            "type": "Compitor",
            "value": 36
          }, {"year": "1998", "type": "ACME", "value": 167}, {
            "year": "1998",
            "type": "Compitor",
            "value": 47
          }, {"year": "1999", "type": "ACME", "value": 142}, {"year": "1999", "type": "Compitor"}, {
            "year": "2000",
            "type": "ACME",
            "value": 117
          }, {"year": "2000", "type": "Compitor"}, {"year": "2001", "type": "ACME", "value": 113}, {
            "year": "2001",
            "type": "Compitor",
            "value": 23
          }, {"year": "2002", "type": "ACME", "value": 132}, {"year": "2002", "type": "Compitor"}, {
            "year": "2003",
            "type": "ACME",
            "value": 146
          }, {"year": "2003", "type": "Compitor", "value": 46}, {
            "year": "2004",
            "type": "ACME",
            "value": 169
          }, {"year": "2004", "type": "Compitor", "value": 59}, {
            "year": "2005",
            "type": "ACME",
            "value": 184
          }, {"year": "2005", "type": "Compitor", "value": 44}],
        cascadingData: [
          {
            value: 63.4,
            city: 'New York',
            date: '2011-10-01'
          }, {
            value: 62.7,
            city: 'Alaska',
            date: '2011-10-01'
          }, {
            value: 72.2,
            city: 'Austin',
            date: '2011-10-01'
          }, {
            value: 58,
            city: 'New York',
            date: '2011-10-02'
          }, {
            value: 59.9,
            city: 'Alaska',
            date: '2011-10-02'
          }, {
            value: 67.7,
            city: 'Austin',
            date: '2011-10-02'
          }, {
            value: 53.3,
            city: 'New York',
            date: '2011-10-03'
          }, {
            value: 59.1,
            city: 'Alaska',
            date: '2011-10-03'
          }, {
            value: 69.4,
            city: 'Austin',
            date: '2011-10-03'
          }, {
            value: 55.7,
            city: 'New York',
            date: '2011-10-04'
          }, {
            value: 58.8,
            city: 'Alaska',
            date: '2011-10-04'
          }, {
            value: 68,
            city: 'Austin',
            date: '2011-10-04'
          }, {
            value: 64.2,
            city: 'New York',
            date: '2011-10-05'
          }, {
            value: 58.7,
            city: 'Alaska',
            date: '2011-10-05'
          }, {
            value: 72.4,
            city: 'Austin',
            date: '2011-10-05'
          }, {
            value: 58.8,
            city: 'New York',
            date: '2011-10-06'
          }, {
            value: 57,
            city: 'Alaska',
            date: '2011-10-06'
          }, {
            value: 77,
            city: 'Austin',
            date: '2011-10-06'
          }, {
            value: 57.9,
            city: 'New York',
            date: '2011-10-07'
          }, {
            value: 56.7,
            city: 'Alaska',
            date: '2011-10-07'
          }, {
            value: 82.3,
            city: 'Austin',
            date: '2011-10-07'
          }, {
            value: 61.8,
            city: 'New York',
            date: '2011-10-08'
          }, {
            value: 56.8,
            city: 'Alaska',
            date: '2011-10-08'
          }, {
            value: 78.9,
            city: 'Austin',
            date: '2011-10-08'
          }, {
            value: 69.3,
            city: 'New York',
            date: '2011-10-09'
          }, {
            value: 56.7,
            city: 'Alaska',
            date: '2011-10-09'
          }, {
            value: 68.8,
            city: 'Austin',
            date: '2011-10-09'
          }, {
            value: 71.2,
            city: 'New York',
            date: '2011-10-10'
          }, {
            value: 60.1,
            city: 'Alaska',
            date: '2011-10-10'
          }, {
            value: 68.7,
            city: 'Austin',
            date: '2011-10-10'
          }, {
            value: 68.7,
            city: 'New York',
            date: '2011-10-11'
          }, {
            value: 61.1,
            city: 'Alaska',
            date: '2011-10-11'
          }, {
            value: 70.3,
            city: 'Austin',
            date: '2011-10-11'
          }, {
            value: 61.8,
            city: 'New York',
            date: '2011-10-12'
          }, {
            value: 61.5,
            city: 'Alaska',
            date: '2011-10-12'
          }, {
            value: 75.3,
            city: 'Austin',
            date: '2011-10-12'
          }, {
            value: 63,
            city: 'New York',
            date: '2011-10-13'
          }, {
            value: 64.3,
            city: 'Alaska',
            date: '2011-10-13'
          }, {
            value: 76.6,
            city: 'Austin',
            date: '2011-10-13'
          }, {
            value: 66.9,
            city: 'New York',
            date: '2011-10-14'
          }, {
            value: 67.1,
            city: 'Alaska',
            date: '2011-10-14'
          }, {
            value: 66.6,
            city: 'Austin',
            date: '2011-10-14'
          }, {
            value: 61.7,
            city: 'New York',
            date: '2011-10-15'
          }, {
            value: 64.6,
            city: 'Alaska',
            date: '2011-10-15'
          }, {
            value: 68,
            city: 'Austin',
            date: '2011-10-15'
          }, {
            value: 61.8,
            city: 'New York',
            date: '2011-10-16'
          }, {
            value: 61.6,
            city: 'Alaska',
            date: '2011-10-16'
          }, {
            value: 70.6,
            city: 'Austin',
            date: '2011-10-16'
          }, {
            value: 62.8,
            city: 'New York',
            date: '2011-10-17'
          }, {
            value: 61.1,
            city: 'Alaska',
            date: '2011-10-17'
          }, {
            value: 71.1,
            city: 'Austin',
            date: '2011-10-17'
          }, {
            value: 60.8,
            city: 'New York',
            date: '2011-10-18'
          }, {
            value: 59.2,
            city: 'Alaska',
            date: '2011-10-18'
          }, {
            value: 70,
            city: 'Austin',
            date: '2011-10-18'
          }, {
            value: 62.1,
            city: 'New York',
            date: '2011-10-19'
          }, {
            value: 58.9,
            city: 'Alaska',
            date: '2011-10-19'
          }, {
            value: 61.6,
            city: 'Austin',
            date: '2011-10-19'
          }, {
            value: 65.1,
            city: 'New York',
            date: '2011-10-20'
          }, {
            value: 57.2,
            city: 'Alaska',
            date: '2011-10-20'
          }, {
            value: 57.4,
            city: 'Austin',
            date: '2011-10-20'
          }, {
            value: 55.6,
            city: 'New York',
            date: '2011-10-21'
          }, {
            value: 56.4,
            city: 'Alaska',
            date: '2011-10-21'
          }, {
            value: 64.3,
            city: 'Austin',
            date: '2011-10-21'
          }, {
            value: 54.4,
            city: 'New York',
            date: '2011-10-22'
          }, {
            value: 60.7,
            city: 'Alaska',
            date: '2011-10-22'
          }, {
            value: 72.4,
            city: 'Austin',
            date: '2011-10-22'
          }, {
            value: 54.4,
            city: 'New York',
            date: '2011-10-23'
          }, {
            value: 65.1,
            city: 'Alaska',
            date: '2011-10-23'
          }, {
            value: 72.4,
            city: 'Austin',
            date: '2011-10-23'
          }, {
            value: 54.8,
            city: 'New York',
            date: '2011-10-24'
          }, {
            value: 60.9,
            city: 'Alaska',
            date: '2011-10-24'
          }, {
            value: 72.5,
            city: 'Austin',
            date: '2011-10-24'
          }, {
            value: 57.9,
            city: 'New York',
            date: '2011-10-25'
          }, {
            value: 56.1,
            city: 'Alaska',
            date: '2011-10-25'
          }, {
            value: 72.7,
            city: 'Austin',
            date: '2011-10-25'
          }, {
            value: 54.6,
            city: 'New York',
            date: '2011-10-26'
          }, {
            value: 54.6,
            city: 'Alaska',
            date: '2011-10-26'
          }, {
            value: 73.4,
            city: 'Austin',
            date: '2011-10-26'
          }, {
            value: 54.4,
            city: 'New York',
            date: '2011-10-27'
          }, {
            value: 56.1,
            city: 'Alaska',
            date: '2011-10-27'
          }, {
            value: 70.7,
            city: 'Austin',
            date: '2011-10-27'
          }, {
            value: 42.5,
            city: 'New York',
            date: '2011-10-28'
          }, {
            value: 58.1,
            city: 'Alaska',
            date: '2011-10-28'
          }, {
            value: 56.8,
            city: 'Austin',
            date: '2011-10-28'
          }, {
            value: 40.9,
            city: 'New York',
            date: '2011-10-29'
          }, {
            value: 57.5,
            city: 'Alaska',
            date: '2011-10-29'
          }, {
            value: 51,
            city: 'Austin',
            date: '2011-10-29'
          }, {
            value: 38.6,
            city: 'New York',
            date: '2011-10-30'
          }, {
            value: 57.7,
            city: 'Alaska',
            date: '2011-10-30'
          }, {
            value: 54.9,
            city: 'Austin',
            date: '2011-10-30'
          }, {
            value: 44.2,
            city: 'New York',
            date: '2011-10-31'
          }, {
            value: 55.1,
            city: 'Alaska',
            date: '2011-10-31'
          }, {
            value: 58.8,
            city: 'Austin',
            date: '2011-10-31'
          }, {
            value: 49.6,
            city: 'New York',
            date: '2011-11-01'
          }, {
            value: 57.9,
            city: 'Alaska',
            date: '2011-11-01'
          }, {
            value: 62.6,
            city: 'Austin',
            date: '2011-11-01'
          }, {
            value: 47.2,
            city: 'New York',
            date: '2011-11-02'
          }, {
            value: 64.6,
            city: 'Alaska',
            date: '2011-11-02'
          }, {
            value: 71,
            city: 'Austin',
            date: '2011-11-02'
          }],
        contrasData: [
          {"country": "USA", "value": null, "year": 1940}, {
            "country": "USA",
            "value": null,
            "year": 1941
          }, {"country": "USA", "value": null, "year": 1942}, {
            "country": "USA",
            "value": null,
            "year": 1943
          }, {"country": "USA", "value": null, "year": 1944}, {
            "country": "USA",
            "value": 6,
            "year": 1945
          }, {"country": "USA", "value": 11, "year": 1946}, {
            "country": "USA",
            "value": 32,
            "year": 1947
          }, {"country": "USA", "value": 110, "year": 1948}, {
            "country": "USA",
            "value": 235,
            "year": 1949
          }, {"country": "USA", "value": 369, "year": 1950}, {
            "country": "USA",
            "value": 640,
            "year": 1951
          }, {"country": "USA", "value": 1005, "year": 1952}, {
            "country": "USA",
            "value": 1436,
            "year": 1953
          }, {"country": "USA", "value": 2063, "year": 1954}, {
            "country": "USA",
            "value": 3057,
            "year": 1955
          }, {"country": "USA", "value": 4618, "year": 1956}, {
            "country": "USA",
            "value": 6444,
            "year": 1957
          }, {"country": "USA", "value": 9822, "year": 1958}, {
            "country": "USA",
            "value": 15468,
            "year": 1959
          }, {"country": "USA", "value": 20434, "year": 1960}, {
            "country": "USA",
            "value": 24126,
            "year": 1961
          }, {"country": "USA", "value": 27387, "year": 1962}, {
            "country": "USA",
            "value": 29459,
            "year": 1963
          }, {"country": "USA", "value": 31056, "year": 1964}, {
            "country": "USA",
            "value": 31982,
            "year": 1965
          }, {"country": "USA", "value": 32040, "year": 1966}, {
            "country": "USA",
            "value": 31233,
            "year": 1967
          }, {"country": "USA", "value": 29224, "year": 1968}, {
            "country": "USA",
            "value": 27342,
            "year": 1969
          }, {"country": "USA", "value": 26662, "year": 1970}, {
            "country": "USA",
            "value": 26956,
            "year": 1971
          }, {"country": "USA", "value": 27912, "year": 1972}, {
            "country": "USA",
            "value": 28999,
            "year": 1973
          }, {"country": "USA", "value": 28965, "year": 1974}, {
            "country": "USA",
            "value": 27826,
            "year": 1975
          }, {"country": "USA", "value": 25579, "year": 1976}, {
            "country": "USA",
            "value": 25722,
            "year": 1977
          }, {"country": "USA", "value": 24826, "year": 1978}, {
            "country": "USA",
            "value": 24605,
            "year": 1979
          }, {"country": "USA", "value": 24304, "year": 1980}, {
            "country": "USA",
            "value": 23464,
            "year": 1981
          }, {"country": "USA", "value": 23708, "year": 1982}, {
            "country": "USA",
            "value": 24099,
            "year": 1983
          }, {"country": "USA", "value": 24357, "year": 1984}, {
            "country": "USA",
            "value": 24237,
            "year": 1985
          }, {"country": "USA", "value": 24401, "year": 1986}, {
            "country": "USA",
            "value": 24344,
            "year": 1987
          }, {"country": "USA", "value": 23586, "year": 1988}, {
            "country": "USA",
            "value": 22380,
            "year": 1989
          }, {"country": "USA", "value": 21004, "year": 1990}, {
            "country": "USA",
            "value": 17287,
            "year": 1991
          }, {"country": "USA", "value": 14747, "year": 1992}, {
            "country": "USA",
            "value": 13076,
            "year": 1993
          }, {"country": "USA", "value": 12555, "year": 1994}, {
            "country": "USA",
            "value": 12144,
            "year": 1995
          }, {"country": "USA", "value": 11009, "year": 1996}, {
            "country": "USA",
            "value": 10950,
            "year": 1997
          }, {"country": "USA", "value": 10871, "year": 1998}, {
            "country": "USA",
            "value": 10824,
            "year": 1999
          }, {"country": "USA", "value": 10577, "year": 2000}, {
            "country": "USA",
            "value": 10527,
            "year": 2001
          }, {"country": "USA", "value": 10475, "year": 2002}, {
            "country": "USA",
            "value": 10421,
            "year": 2003
          }, {"country": "USA", "value": 10358, "year": 2004}, {
            "country": "USA",
            "value": 10295,
            "year": 2005
          }, {"country": "USA", "value": 10104, "year": 2006}, {
            "country": "USA",
            "value": 9914,
            "year": 2007
          }, {"country": "USA", "value": 9620, "year": 2008}, {
            "country": "USA",
            "value": 9326,
            "year": 2009
          }, {"country": "USA", "value": 5113, "year": 2010}, {
            "country": "USA",
            "value": 5113,
            "year": 2011
          }, {"country": "USA", "value": 4954, "year": 2012}, {
            "country": "USA",
            "value": 4804,
            "year": 2013
          }, {"country": "USA", "value": 4761, "year": 2014}, {
            "country": "USA",
            "value": 4717,
            "year": 2015
          }, {"country": "USA", "value": 4368, "year": 2016}, {
            "country": "USA",
            "value": 4018,
            "year": 2017
          }, {"country": "USSR/Russia", "value": null, "year": 1940}, {
            "country": "USSR/Russia",
            "value": null,
            "year": 1941
          }, {"country": "USSR/Russia", "value": null, "year": 1942}, {
            "country": "USSR/Russia",
            "value": null,
            "year": 1943
          }, {"country": "USSR/Russia", "value": null, "year": 1944}, {
            "country": "USSR/Russia",
            "value": null,
            "year": 1945
          }, {"country": "USSR/Russia", "value": null, "year": 1946}, {
            "country": "USSR/Russia",
            "value": null,
            "year": 1947
          }, {"country": "USSR/Russia", "value": null, "year": 1948}, {
            "country": "USSR/Russia",
            "value": null,
            "year": 1949
          }, {"country": "USSR/Russia", "value": 5, "year": 1950}, {
            "country": "USSR/Russia",
            "value": 25,
            "year": 1951
          }, {"country": "USSR/Russia", "value": 50, "year": 1952}, {
            "country": "USSR/Russia",
            "value": 120,
            "year": 1953
          }, {"country": "USSR/Russia", "value": 150, "year": 1954}, {
            "country": "USSR/Russia",
            "value": 200,
            "year": 1955
          }, {"country": "USSR/Russia", "value": 426, "year": 1956}, {
            "country": "USSR/Russia",
            "value": 660,
            "year": 1957
          }, {"country": "USSR/Russia", "value": 869, "year": 1958}, {
            "country": "USSR/Russia",
            "value": 1060,
            "year": 1959
          }, {"country": "USSR/Russia", "value": 1605, "year": 1960}, {
            "country": "USSR/Russia",
            "value": 2471,
            "year": 1961
          }, {"country": "USSR/Russia", "value": 3322, "year": 1962}, {
            "country": "USSR/Russia",
            "value": 4238,
            "year": 1963
          }, {"country": "USSR/Russia", "value": 5221, "year": 1964}, {
            "country": "USSR/Russia",
            "value": 6129,
            "year": 1965
          }, {"country": "USSR/Russia", "value": 7089, "year": 1966}, {
            "country": "USSR/Russia",
            "value": 8339,
            "year": 1967
          }, {"country": "USSR/Russia", "value": 9399, "year": 1968}, {
            "country": "USSR/Russia",
            "value": 10538,
            "year": 1969
          }, {"country": "USSR/Russia", "value": 11643, "year": 1970}, {
            "country": "USSR/Russia",
            "value": 13092,
            "year": 1971
          }, {"country": "USSR/Russia", "value": 14478, "year": 1972}, {
            "country": "USSR/Russia",
            "value": 15915,
            "year": 1973
          }, {"country": "USSR/Russia", "value": 17385, "year": 1974}, {
            "country": "USSR/Russia",
            "value": 19055,
            "year": 1975
          }, {"country": "USSR/Russia", "value": 21205, "year": 1976}, {
            "country": "USSR/Russia",
            "value": 23044,
            "year": 1977
          }, {"country": "USSR/Russia", "value": 25393, "year": 1978}, {
            "country": "USSR/Russia",
            "value": 27935,
            "year": 1979
          }, {"country": "USSR/Russia", "value": 30062, "year": 1980}, {
            "country": "USSR/Russia",
            "value": 32049,
            "year": 1981
          }, {"country": "USSR/Russia", "value": 33952, "year": 1982}, {
            "country": "USSR/Russia",
            "value": 35804,
            "year": 1983
          }, {"country": "USSR/Russia", "value": 37431, "year": 1984}, {
            "country": "USSR/Russia",
            "value": 39197,
            "year": 1985
          }, {"country": "USSR/Russia", "value": 45000, "year": 1986}, {
            "country": "USSR/Russia",
            "value": 43000,
            "year": 1987
          }, {"country": "USSR/Russia", "value": 41000, "year": 1988}, {
            "country": "USSR/Russia",
            "value": 39000,
            "year": 1989
          }, {"country": "USSR/Russia", "value": 37000, "year": 1990}, {
            "country": "USSR/Russia",
            "value": 35000,
            "year": 1991
          }, {"country": "USSR/Russia", "value": 33000, "year": 1992}, {
            "country": "USSR/Russia",
            "value": 31000,
            "year": 1993
          }, {"country": "USSR/Russia", "value": 29000, "year": 1994}, {
            "country": "USSR/Russia",
            "value": 27000,
            "year": 1995
          }, {"country": "USSR/Russia", "value": 25000, "year": 1996}, {
            "country": "USSR/Russia",
            "value": 24000,
            "year": 1997
          }, {"country": "USSR/Russia", "value": 23000, "year": 1998}, {
            "country": "USSR/Russia",
            "value": 22000,
            "year": 1999
          }, {"country": "USSR/Russia", "value": 21000, "year": 2000}, {
            "country": "USSR/Russia",
            "value": 20000,
            "year": 2001
          }, {"country": "USSR/Russia", "value": 19000, "year": 2002}, {
            "country": "USSR/Russia",
            "value": 18000,
            "year": 2003
          }, {"country": "USSR/Russia", "value": 18000, "year": 2004}, {
            "country": "USSR/Russia",
            "value": 17000,
            "year": 2005
          }, {"country": "USSR/Russia", "value": 16000, "year": 2006}, {
            "country": "USSR/Russia",
            "value": 15537,
            "year": 2007
          }, {"country": "USSR/Russia", "value": 14162, "year": 2008}, {
            "country": "USSR/Russia",
            "value": 12787,
            "year": 2009
          }, {"country": "USSR/Russia", "value": 12600, "year": 2010}, {
            "country": "USSR/Russia",
            "value": 11400,
            "year": 2011
          }, {"country": "USSR/Russia", "value": 5500, "year": 2012}, {
            "country": "USSR/Russia",
            "value": 4512,
            "year": 2013
          }, {"country": "USSR/Russia", "value": 4502, "year": 2014}, {
            "country": "USSR/Russia",
            "value": 4502,
            "year": 2015
          }, {"country": "USSR/Russia", "value": 4500, "year": 2016}, {
            "country": "USSR/Russia",
            "value": 4500,
            "year": 2017
          }],
        gradientData: [
          {
            time: '2016-08-08 00:00:00',
            tem: 10
          }, {
            time: '2016-08-08 00:10:00',
            tem: 22
          }, {
            time: '2016-08-08 00:30:00',
            tem: 16
          }, {
            time: '2016-08-09 00:35:00',
            tem: 26
          }, {
            time: '2016-08-09 01:00:00',
            tem: 12
          }, {
            time: '2016-08-09 01:20:00',
            tem: 26
          }, {
            time: '2016-08-10 01:40:00',
            tem: 18
          }, {
            time: '2016-08-10 02:00:00',
            tem: 26
          }, {
            time: '2016-08-10 02:20:00',
            tem: 12
          }],
      }
    },
    created: function () {

    },
    mounted: function () {
      this.basicArea();//基础面积图
      this.negativeArea();//带负值面积图
      this.nullArea();//区域图
      this.cascadingArea();//层叠面积图
      this.contrastArea();//面积图对比
      this.gradientArea();//渐变填充面积图
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      basicArea() {
        var chart = new F2.Chart({
          id: 'basicArea',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.basicData);
        chart.tooltip({
          showCrosshairs: true
        });
        chart.scale({
          time: {
            range: [0, 1]
          },
          tem: {
            tickCount: 5,
            min: 0
          }
        });
        chart.axis('time', {
          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.area().position('time*tem');
        chart.line().position('time*tem');
        chart.render();
      },
      negativeArea() {
        var chart = new F2.Chart({
          id: 'negativeArea',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.negativeData, {
          month: {
            range: [0, 1]
          },
          value: {
            nice: false,
            min: -100,
            max: 100,
            tickCount: 5
          }
        });

        chart.axis('month', {
          line: null,
          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.axis('value', {
          grid: function grid(text) {
            if (text === '0') {
              return {
                lineDash: null,
                lineWidth: 1
              };
            }
          }
        });
        chart.tooltip({
          showCrosshairs: true
        });
        chart.area().position('month*value');
        chart.line().position('month*value');
        chart.render();
      },
      nullArea() {
        var chart = new F2.Chart({
          id: 'nullArea',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.nullData);
        chart.scale('year', {
          tickCount: 5,
          range: [0, 1]
        });
        chart.axis('year', {
          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.legend(false);
        chart.tooltip({
          showCrosshairs: true
        });
        chart.area().position('year*value').color('type').shape('smooth');
        chart.line().position('year*value').color('type').shape('smooth');
        chart.render();
      },
      cascadingArea() {
        var chart = new F2.Chart({
          id: 'cascadingArea',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.cascadingData, {
          date: {
            range: [0, 1],
            type: 'timeCat',
            mask: 'MM-DD'
          },
          value: {
            max: 300,
            tickCount: 4
          }
        });
        chart.tooltip({
          showCrosshairs: true,
          custom: true, // 自定义 tooltip 内容框
          onChange: function onChange(obj) {
            var legend = chart.get('legendController').legends.top[0];
            var tooltipItems = obj.items;
            var legendItems = legend.items;
            var map = {};
            legendItems.map(function (item) {
              map[item.name] = _.clone(item);
            });
            tooltipItems.map(function (item) {
              var name = item.name;
              var value = item.value;
              if (map[name]) {
                map[name].value = value;
              }
            });
            legend.setItems(_.values(map));
            var coord = chart.get('coord');
            var title = tooltipItems[0].title;
            $('#date').text(title);
            $('#date').css({
              visibility: 'visible',
              left: obj.x,
              top: coord.start.y
            });
          },
          onHide: function onHide() {
            var legend = chart.get('legendController').legends.top[0];
            legend.setItems(chart.getLegendItems().country);
            $('#date').css({
              visibility: 'hidden'
            });
          }
        });
        chart.axis('date', {
          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.area().position('date*value').color('city').adjust('stack');
        chart.line().position('date*value').color('city').adjust('stack');
        chart.render();
      },
      contrastArea() {
        var chart = new F2.Chart({
          id: 'contrastArea',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.contrasData);
        chart.scale('year', {
          tickCount: 5
        });
        chart.axis('year', {
          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.axis('value', {
          label: function label(text) {
            return {
              text: text / 1000 + 'k'
            };
          }
        });
        // tooltip 与图例结合
        chart.tooltip({
          showCrosshairs: true,
          custom: true, // 自定义 tooltip 内容框
          onChange: function onChange(obj) {
            var legend = chart.get('legendController').legends.top[0];
            var tooltipItems = obj.items;
            var legendItems = legend.items;
            var map = {};
            legendItems.map(function (item) {
              map[item.name] = _.clone(item);
            });
            tooltipItems.map(function (item) {
              var name = item.name;
              var value = item.value;
              if (map[name]) {
                map[name].value = value;
              }
            });
            legend.setItems(_.values(map));
          },
          onHide: function onHide() {
            var legend = chart.get('legendController').legends.top[0];
            legend.setItems(chart.getLegendItems().country);
          }
        });
        chart.area().position('year*value').color('country').shape('smooth');
        chart.line().position('year*value').color('country').shape('smooth');
        chart.render();
      },
      gradientArea(){
        var chart = new F2.Chart({
          id: 'gradientArea',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.gradientData, {
          time: {
            type: 'timeCat',
            tickCount: 3,
            range: [0, 1]
          },
          tem: {
            tickCount: 5,
            min: 0
          }
        });

        chart.axis('time', {
          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({
          showCrosshairs: true
        });

        chart.area().position('time*tem').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth');
        chart.line().position('time*tem').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth');
        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>
