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

      <div class="chart-wrapper">
        <div class="chart-type">分组柱状图</div>
        <canvas id="groupingColumn"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">层叠柱状图</div>
        <canvas id="cascadingColumn"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">区间柱状图</div>
        <canvas id="intervalColumn"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">带负值的分组柱状图</div>
        <canvas id="negativeGroupingColumn"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">全负值柱状图</div>
        <canvas id="allNegativeColumn"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">渐变色柱状图</div>
        <canvas id="gradientColumn"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">纹理柱状图</div>
        <canvas id="textureColumn"></canvas>
      </div>
    </h-content>
  </h-view>
</template>

<script>
  export default {
    data() {
      return {
        basicData: [
          {
            year: '1951 年',
            sales: 38
          }, {
            year: '1952 年',
            sales: 52
          }, {
            year: '1956 年',
            sales: 61
          }, {
            year: '1957 年',
            sales: 145
          }, {
            year: '1958 年',
            sales: 48
          }, {
            year: '1959 年',
            sales: 38
          }, {
            year: '1960 年',
            sales: 38
          }, {
            year: '1962 年',
            sales: 38
          }],
        groupingData: [
          {
            name: 'London',
            month: 'Jan.',
            rain: 18.9
          }, {
            name: 'London',
            month: 'Feb.',
            rain: 28.8
          }, {
            name: 'London',
            month: 'Mar.',
            rain: 39.3
          }, {
            name: 'London',
            month: 'Apr.',
            rain: 81.4
          }, {
            name: 'London',
            month: 'May.',
            rain: 47
          }, {
            name: 'London',
            month: 'Jun.',
            rain: 20.3
          }, {
            name: 'London',
            month: 'Jul.',
            rain: 24
          }, {
            name: 'London',
            month: 'Aug.',
            rain: 35.6
          }, {
            name: 'Berlin',
            month: 'Jan.',
            rain: 12.4
          }, {
            name: 'Berlin',
            month: 'Feb.',
            rain: 23.2
          }, {
            name: 'Berlin',
            month: 'Mar.',
            rain: 34.5
          }, {
            name: 'Berlin',
            month: 'Apr.',
            rain: 99.7
          }, {
            name: 'Berlin',
            month: 'May.',
            rain: 52.6
          }, {
            name: 'Berlin',
            month: 'Jun.',
            rain: 35.5
          }, {
            name: 'Berlin',
            month: 'Jul.',
            rain: 37.4
          }, {
            name: 'Berlin',
            month: 'Aug.',
            rain: 42.4
          }],
        cascadingData: [
          {
            name: 'London',
            month: 'Jan.',
            rain: 18.9
          }, {
            name: 'London',
            month: 'Feb.',
            rain: 28.8
          }, {
            name: 'London',
            month: 'Mar.',
            rain: 39.3
          }, {
            name: 'London',
            month: 'Apr.',
            rain: 81.4
          }, {
            name: 'London',
            month: 'May.',
            rain: 47
          }, {
            name: 'London',
            month: 'Jun.',
            rain: 20.3
          }, {
            name: 'London',
            month: 'Jul.',
            rain: 24
          }, {
            name: 'London',
            month: 'Aug.',
            rain: 35.6
          }, {
            name: 'Berlin',
            month: 'Jan.',
            rain: 12.4
          }, {
            name: 'Berlin',
            month: 'Feb.',
            rain: 23.2
          }, {
            name: 'Berlin',
            month: 'Mar.',
            rain: 34.5
          }, {
            name: 'Berlin',
            month: 'Apr.',
            rain: 99.7
          }, {
            name: 'Berlin',
            month: 'May.',
            rain: 52.6
          }, {
            name: 'Berlin',
            month: 'Jun.',
            rain: 35.5
          }, {
            name: 'Berlin',
            month: 'Jul.',
            rain: 37.4
          }, {
            name: 'Berlin',
            month: 'Aug.',
            rain: 42.4
          }],
        intervalData: [
          {
            x: '分类一',
            y: [76, 100]
          }, {
            x: '分类二',
            y: [56, 108]
          }, {
            x: '分类三',
            y: [38, 129]
          }, {
            x: '分类四',
            y: [58, 155]
          }, {
            x: '分类五',
            y: [45, 120]
          }, {
            x: '分类六',
            y: [23, 99]
          }, {
            x: '分类七',
            y: [18, 56]
          }, {
            x: '分类八',
            y: [18, 34]
          }],
        negativeGroupingData: [
          {
            time: '周一',
            tem: 6.9,
            city: 'tokyo'
          }, {
            time: '周二',
            tem: 9.5,
            city: 'tokyo'
          }, {
            time: '周三',
            tem: 14.5,
            city: 'tokyo'
          }, {
            time: '周四',
            tem: 18.2,
            city: 'tokyo'
          }, {
            time: '周五',
            tem: 21.5,
            city: 'tokyo'
          }, {
            time: '周六',
            tem: 25.2,
            city: 'tokyo'
          }, {
            time: '周日',
            tem: 26.5,
            city: 'tokyo'
          }, {
            time: '周一',
            tem: -10.8,
            city: 'newYork'
          }, {
            time: '周二',
            tem: -5.7,
            city: 'newYork'
          }, {
            time: '周三',
            tem: -11.3,
            city: 'newYork'
          }, {
            time: '周四',
            tem: -17,
            city: 'newYork'
          }, {
            time: '周五',
            tem: -22,
            city: 'newYork'
          }, {
            time: '周六',
            tem: -24.8,
            city: 'newYork'
          }, {
            time: '周日',
            tem: -24.1,
            city: 'newYork'
          }, {
            time: '周一',
            tem: 2.6,
            city: 'berlin'
          }, {
            time: '周二',
            tem: 3.5,
            city: 'berlin'
          }, {
            time: '周三',
            tem: 8.4,
            city: 'berlin'
          }, {
            time: '周四',
            tem: 13.5,
            city: 'berlin'
          }, {
            time: '周五',
            tem: 17,
            city: 'berlin'
          }, {
            time: '周六',
            tem: -18.6,
            city: 'berlin'
          }, {
            time: '周日',
            tem: 17.9,
            city: 'berlin'
          }],
        allNegativeData: [
          {
            value: -37099,
            season: '第一季'
          }, {
            value: -49959.4,
            season: '第二季'
          }, {
            value: -51926.5,
            season: '第三季'
          }, {
            value: -139255.5,
            season: '第四季'
          }],
        gradientData: [
          {
            year: '2014 年',
            sales: 145
          }, {
            year: '2015 年',
            sales: 121
          }, {
            year: '2016 年',
            sales: 100
          }, {
            year: '2017 年',
            sales: 97
          }, {
            year: '2018 年',
            sales: 85
          }],
        textureData: [
          {
            year: '1951 年',
            sales: 38
          }, {
            year: '1952 年',
            sales: 52
          }, {
            year: '1956 年',
            sales: 61
          }, {
            year: '1957 年',
            sales: 145
          }, {
            year: '1958 年',
            sales: 48
          }],
      }
    },
    created: function () {
    },
    mounted: function () {
      this.basicColumn();//基础柱状图
      this.groupingColumn();//分组柱状图
      this.cascadingColumn();//层叠柱状图
      this.intervalColumn();//区间柱状图
      this.negativeGroupingColumn();//带负值的分组柱状图
      this.allNegativeColumn();//全负值柱状图
      this.gradientColumn();//渐变色柱状图
      this.textureColumn();//纹理柱状图
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      basicColumn(){
        var chart = new F2.Chart({
          id: 'basicColumn',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.basicData, {
          sales: {
            tickCount: 5
          }
        });
        chart.tooltip({
          showItemMarker: false,
          onShow: function onShow(ev) {
            var items = ev.items;
            items[0].name = null;
            items[0].name = items[0].title;
            items[0].value = '¥ ' + items[0].value;
          }
        });
        chart.interval().position('year*sales');
        chart.render();
      },
      groupingColumn(){
        var chart = new F2.Chart({
          id: 'groupingColumn',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.groupingData);
        chart.tooltip({
          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.interval().position('month*rain').color('name').adjust({
          type: 'dodge',
          marginRatio: 0.05 // 设置分组间柱子的间距
        });
        chart.render();
      },
      cascadingColumn(){
        var chart = new F2.Chart({
          id: 'cascadingColumn',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.cascadingData, {
          'rain': {
            tickCount: 5
          }
        });
        chart.tooltip({
          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.interval().position('month*rain').color('name').adjust('stack');
        chart.render();
      },
      intervalColumn(){
        var chart = new F2.Chart({
          id: 'intervalColumn',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.intervalData, {
          y: {
            tickCount: 5
          }
        });
        chart.tooltip({
          showItemMarker: false,
          onShow: function onShow(ev) {
            var items = ev.items;
            items[0].name = '范围';
            var value = items[0].value;
            items[0].value = value[0] + ' 至 ' + value[1];
          }
        });
        chart.interval().position('x*y').animate({
          appear: {
            animation: 'shapesScaleInY'
          }
        });
        chart.render();
      },
      negativeGroupingColumn(){
        var chart = new F2.Chart({
          id: 'negativeGroupingColumn',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.negativeGroupingData, {
          tem: {
            tickCount: 5
          }
        });
        chart.tooltip({
          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.interval().position('time*tem').color('city').style('tem', {
          radius: function radius(val) {
            return val > 0 ? [4, 4, 0, 0] : [0, 0, 4, 4];
          }
        }).adjust('dodge');
        chart.render();
      },
      allNegativeColumn(){
        function numberToMoney(n) {
          return String(Math.floor(n * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
        var chart = new F2.Chart({
          id: 'allNegativeColumn',
          pixelRatio: window.devicePixelRatio,
          padding: [60, 'auto', 'auto']
        });
        chart.source(this.allNegativeData);
        chart.axis('season', false);
        chart.axis('value', {
          grid: function grid(text, index, total) {
            if (index === total - 1) {
              return {
                lineDash: null,
                stroke: '#e8e8e8'
              };
            }
            return {};
          }
        });
        chart.tooltip(false);

        chart.interval().position('season*value').color('value', function(val) {
          return val > 0 ? '#FC674D' : '#9AC2AB';
        });

        // 辅助元素
        this.allNegativeData.forEach(function(obj) {
          // 文字部分
          chart.guide().text({
            position: [obj.season, 'max'],
            content: obj.season,
            style: {
              fill: '#808080',
              textBaseline: 'bottom'
            },
            offsetY: -5
          });
          chart.guide().text({
            position: [obj.season, obj.value],
            content: numberToMoney(obj.value),
            style: {
              fill: '#fff',
              textBaseline: 'middle',
              textAlign: 'start',
              rotate: -Math.PI / 2,
              fontSize: 11
            },
            offsetY: -5
          });
        });

        chart.guide().text({
          position: ['min', 'max'],
          content: '单位（万元）',
          style: {
            textBaseline: 'middle',
            textAlign: 'center'
          },
          offsetY: -35
        });

        chart.render();
      },
      gradientColumn(){
        var chart = new F2.Chart({
          id: 'gradientColumn',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.gradientData, {
          sales: {
            tickCount: 5
          }
        });
        chart.tooltip({
          showItemMarker: false,
          onShow: function onShow(ev) {
            var items = ev.items;
            items[0].name = null;
            items[0].name = items[0].title;
            items[0].value = '¥ ' + items[0].value;
          }
        });

        // 让柱状图的宽度适配不同的屏幕尺寸
        var barWidth = 36 * (window.innerWidth / 375);

        chart.interval().position('year*sales').color('l(90) 0:#1890ff 1:#70cdd0') // 定义柱状图渐变色
          .size(barWidth);
        chart.render();
      },
      textureColumn() {
        var chart = new F2.Chart({
          id: 'textureColumn',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.textureData, {
          sales: {
            tickCount: 5
          }
        });
        chart.tooltip({
          showItemMarker: false,
          onShow: function onShow(ev) {
            var items = ev.items;
            items[0].name = null;
            items[0].name = items[0].title;
            items[0].value = '¥ ' + items[0].value;
          }
        });
        // 创建纹理对象
        // 获取 canvas 上下文对像
        var ctx = chart.get('canvas').get('context');
        var img = new Image();
        img.src = 'https://gw.alipayobjects.com/zos/rmsportal/cNOctfQVgZmwaXeBITuD.jpg';
        img.onload = function () {
          var pattern = ctx.createPattern(img, 'repeat');
          chart.interval().position('year*sales').color(pattern);
          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>
