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

      <div class="chart-wrapper">
        <div class="chart-type">曲线折线图</div>
        <canvas id="curveLine"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">层叠点线图</div>
        <canvas id="movementsLine"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">某国结婚年龄走势图</div>
        <canvas id="marryLine"></canvas>
      </div>
    </h-content>
  </h-view>
</template>

<script>
  export default {
    data() {
      return {
        basicData: [
          {
            date: "2017-06-05",
            value: 116
          }, {
            date: "2017-06-06",
            value: 129
          }, {
            date: "2017-06-07",
            value: 135
          }, {
            date: "2017-06-08",
            value: 86
          }, {
            date: "2017-06-09",
            value: 73
          }, {
            date: "2017-06-10",
            value: 85
          }, {
            date: "2017-06-11",
            value: 73
          }, {
            date: "2017-06-12",
            value: 68
          }, {
            date: "2017-06-13",
            value: 92
          }, {
            date: "2017-06-14",
            value: 130
          }, {
            date: "2017-06-15",
            value: 245
          }, {
            date: "2017-06-16",
            value: 139
          }, {
            date: "2017-06-17",
            value: 115
          }, {
            date: "2017-06-18",
            value: 111
          }, {
            date: "2017-06-19",
            value: 309
          }, {
            date: "2017-06-20",
            value: 206
          }, {
            date: "2017-06-21",
            value: 137
          }, {
            date: "2017-06-22",
            value: 128
          }, {
            date: "2017-06-23",
            value: 85
          }, {
            date: "2017-06-24",
            value: 94
          }, {
            date: "2017-06-25",
            value: 71
          }, {
            date: "2017-06-26",
            value: 106
          }, {
            date: "2017-06-27",
            value: 84
          }, {
            date: "2017-06-28",
            value: 93
          }, {
            date: "2017-06-29",
            value: 85
          }, {
            date: "2017-06-30",
            value: 73
          }, {
            date: "2017-07-01",
            value: 83
          }, {
            date: "2017-07-02",
            value: 125
          }, {
            date: "2017-07-03",
            value: 107
          }, {
            date: "2017-07-04",
            value: 82
          }, {
            date: "2017-07-05",
            value: 44
          }, {
            date: "2017-07-06",
            value: 72
          }, {
            date: "2017-07-07",
            value: 106
          }, {
            date: "2017-07-08",
            value: 107
          }, {
            date: "2017-07-09",
            value: 66
          }, {
            date: "2017-07-10",
            value: 91
          }, {
            date: "2017-07-11",
            value: 92
          }, {
            date: "2017-07-12",
            value: 113
          }, {
            date: "2017-07-13",
            value: 107
          }, {
            date: "2017-07-14",
            value: 131
          }, {
            date: "2017-07-15",
            value: 111
          }, {
            date: "2017-07-16",
            value: 64
          }, {
            date: "2017-07-17",
            value: 69
          }, {
            date: "2017-07-18",
            value: 88
          }, {
            date: "2017-07-19",
            value: 77
          }, {
            date: "2017-07-20",
            value: 83
          }, {
            date: "2017-07-21",
            value: 111
          }, {
            date: "2017-07-22",
            value: 57
          }, {
            date: "2017-07-23",
            value: 55
          }, {
            date: "2017-07-24",
            value: 60
          }],
        curveData: [
          {
            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: 20
          }, {
            time: '2016-08-09 00:35:00',
            tem: 26
          }, {
            time: '2016-08-09 01:00:00',
            tem: 20
          }, {
            time: '2016-08-09 01:20:00',
            tem: 26
          }, {
            time: '2016-08-10 01:40:00',
            tem: 28
          }, {
            time: '2016-08-10 02:00:00',
            tem: 20
          }, {
            time: '2016-08-10 02:20:00',
            tem: 18
          }],
        movementsData: [
          {
            country: 'Asia',
            year: '1750',
            value: 1502
          }, {
            country: 'Asia',
            year: '1800',
            value: 1635
          }, {
            country: 'Asia',
            year: '1850',
            value: 1809
          }, {
            country: 'Asia',
            year: '1900',
            value: 5268
          }, {
            country: 'Asia',
            year: '1950',
            value: 2400
          }, {
            country: 'Asia',
            year: '1999',
            value: 3634
          }, {
            country: 'Asia',
            year: '2050',
            value: 1947
          }, {
            country: 'Africa',
            year: '1750',
            value: 1106
          }, {
            country: 'Africa',
            year: '1800',
            value: 1107
          }, {
            country: 'Africa',
            year: '1850',
            value: 1011
          }, {
            country: 'Africa',
            year: '1900',
            value: 1266
          }, {
            country: 'Africa',
            year: '1950',
            value: 1221
          }, {
            country: 'Africa',
            year: '1999',
            value: 767
          }, {
            country: 'Africa',
            year: '2050',
            value: 1330
          }, {
            country: 'Oceania',
            year: '1750',
            value: 1200
          }, {
            country: 'Oceania',
            year: '1800',
            value: 1200
          }, {
            country: 'Oceania',
            year: '1850',
            value: 2000
          }, {
            country: 'Oceania',
            year: '1900',
            value: 460
          }, {
            country: 'Oceania',
            year: '1950',
            value: 530
          }, {
            country: 'Oceania',
            year: '1999',
            value: 300
          }, {
            country: 'Oceania',
            year: '2050',
            value: 800
          }],
        marryData: [
          {
            year: 2000,
            age: 27.2
          }, {
            year: 2001,
            age: 27.5
          }, {
            year: 2002,
            age: 27.8
          }, {
            year: 2003,
            age: 28
          }, {
            year: 2004,
            age: 28.2
          }, {
            year: 2005,
            age: 28.4
          }, {
            year: 2006,
            age: 28.8
          }, {
            year: 2007,
            age: 28.8
          }, {
            year: 2008,
            age: 28.8
          }, {
            year: 2009,
            age: 28.8
          }, {
            year: 2010,
            age: 28.9
          }, {
            year: 2011,
            age: 29
          }, {
            year: 2012,
            age: 29.3
          }, {
            year: 2013,
            age: 29.4
          }, {
            year: 2014,
            age: 29.5
          }, {
            year: 2015,
            age: 29.7
          }, {
            year: 2016,
            age: 30
          }, {
            year: 2017,
            age: 30.12
          }],
      }
    },
    created: function () {
    },
    mounted: function () {
      this.basicLine();//基础折线图
      this.curveLine();//曲线折线图
      this.movementsLine();//层叠点线图
      this.marryLine();//结婚年龄走势
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      basicLine(){
        var chart = new F2.Chart({
          id: 'basicLine',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.basicData, {
          value: {
            tickCount: 5,
            min: 0
          },
          date: {
            type: 'timeCat',
            range: [0, 1],
            tickCount: 3
          }
        });
        chart.tooltip({
          custom: true,
          showXTip: true,
          showYTip: true,
          snap: true,
          crosshairsType: 'xy',
          crosshairsStyle: {
            lineDash: [2]
          }
        });
        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.line().position('date*value');
        chart.render();
      },
      curveLine(){
        var chart = new F2.Chart({
          id: 'curveLine',
          pixelRatio: window.devicePixelRatio
        });

        var defs = {
          time: {
            type: 'timeCat',
            mask: 'MM/DD',
            tickCount: 3,
            range: [0, 1]
          },
          tem: {
            tickCount: 5,
            min: 0,
            alias: '日均温度'
          }
        };
        chart.source(this.curveData, defs);
        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.line().position('time*tem').shape('smooth');
        chart.point().position('time*tem').shape('smooth').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      movementsLine(){

        var chart = new F2.Chart({
          id: 'movementsLine',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.movementsData, {
          year: {
            range: [0, 1]
          }
        });
        chart.tooltip({
          showCrosshairs: true,
          custom: true,
          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').adjust('stack');
        chart.line().position('year*value').color('country').size(2).adjust('stack');
        chart.point().position('year*value').color('country').adjust('stack');
        chart.render();
      },
      marryLine(){
        var chart = new F2.Chart({
          id: 'marryLine',
          pixelRatio: window.devicePixelRatio
        });
        var defs = {
          year: {
            range: [0, 1],
            max: 2020
          },
          age: {
            tickCount: 5
          }
        };
        chart.axis('year', {
          label: function label(text, index, total) {
            var cfg = {
              textAlign: 'center'
            };
            if (index === 0) {
              cfg.textAlign = 'start';
            }
            if (index > 0 && index === total - 1) {
              cfg.textAlign = 'end';
            }
            return cfg;
          }
        });
        chart.source(this.marryData, defs);
        chart.tooltip({
          showCrosshairs: true
        });
        chart.guide().tag({
          position: [2017, 30.12],
          content: '30.12',
          direct: 'tl',
          offsetY: -5,
          background: {
            fill: '#8659AF'
          },
          pointStyle: {
            fill: '#8659AF'
          }
        });
        chart.line().position('year*age').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
        chart.area().position('year*age').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
        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>
