/**
* @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">X轴值自定义+Y轴值自定义</div>
        <canvas id="XYLine"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">堆积条形图</div>
        <canvas id="accumulationLine"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">颜色填充条形图</div>
        <canvas id="colorLine"></canvas>
      </div>
    </h-content>
  </h-view>
</template>

<script>
  export default {
    data() {
      return {
        basicData: [
          {
            country: '巴西',
            population: 18203
          }, {
            country: '印尼',
            population: 23489
          }, {
            country: '美国',
            population: 29034
          }, {
            country: '印度',
            population: 104970
          }, {
            country: '中国',
            population: 131744
          }],
        XYData: [
          {
            gender: 'Male',
            value: -4.4,
            cate: '0-10'
          }, {
            gender: 'Male',
            value: -4.8,
            cate: '10-19'
          }, {
            gender: 'Male',
            value: -5.8,
            cate: '20-29'
          }, {
            gender: 'Male',
            value: -6.2,
            cate: '30-39'
          }, {
            gender: 'Male',
            value: -7.5,
            cate: '40-49'
          }, {
            gender: 'Male',
            value: -8.0,
            cate: '50-59'
          }, {
            gender: 'Male',
            value: -5.5,
            cate: '60-69'
          }, {
            gender: 'Male',
            value: -4.8,
            cate: '70-79'
          }, {
            gender: 'Male',
            value: -1.8,
            cate: '80-89'
          }, {
            gender: 'Male',
            value: -0.3,
            cate: '90-99'
          }, {
            gender: 'Male',
            value: -0.1,
            cate: '100 +'
          }, {
            gender: 'Female',
            value: 4.1,
            cate: '0-10'
          }, {
            gender: 'Female',
            value: 4.6,
            cate: '10-19'
          }, {
            gender: 'Female',
            value: 5.6,
            cate: '20-29'
          }, {
            gender: 'Female',
            value: 6.0,
            cate: '30-39'
          }, {
            gender: 'Female',
            value: 7.2,
            cate: '40-49'
          }, {
            gender: 'Female',
            value: 7.9,
            cate: '50-59'
          }, {
            gender: 'Female',
            value: 6.0,
            cate: '60-69'
          }, {
            gender: 'Female',
            value: 5.8,
            cate: '70-79'
          }, {
            gender: 'Female',
            value: 3.0,
            cate: '80-89'
          }, {
            gender: 'Female',
            value: 0.7,
            cate: '90-99'
          }, {
            gender: 'Female',
            value: 0.1,
            cate: '100 +'
          }],
        accumulationData: [
          {
          "candy": "Bounty",
          "type": "非常喜欢",
          "value": 446,
          "percent": 0.24030172413793102
        }, {"candy": "Bounty", "type": "挺喜欢", "value": 672, "percent": 0.3620689655172414}, {
          "candy": "Bounty",
          "type": "没什么感觉",
          "value": 273,
          "percent": 0.1470905172413793
        }, {"candy": "Bounty", "type": "不太喜欢", "value": 204, "percent": 0.10991379310344827}, {
          "candy": "Bounty",
          "type": "非常讨厌",
          "value": 261,
          "percent": 0.140625
        }, {
          "candy": "Maltesers Teaser",
          "type": "非常喜欢",
          "value": 726,
          "percent": 0.3913746630727763
        }, {
          "candy": "Maltesers Teaser",
          "type": "挺喜欢",
          "value": 777,
          "percent": 0.4188679245283019
        }, {
          "candy": "Maltesers Teaser",
          "type": "没什么感觉",
          "value": 258,
          "percent": 0.13908355795148247
        }, {
          "candy": "Maltesers Teaser",
          "type": "不太喜欢",
          "value": 74,
          "percent": 0.039892183288409704
        }, {
          "candy": "Maltesers Teaser",
          "type": "非常讨厌",
          "value": 20,
          "percent": 0.01078167115902965
        }, {"candy": "Galaxy", "type": "非常喜欢", "value": 538, "percent": 0.2901833872707659}, {
          "candy": "Galaxy",
          "type": "挺喜欢",
          "value": 946,
          "percent": 0.5102481121898598
        }, {"candy": "Galaxy", "type": "没什么感觉", "value": 270, "percent": 0.14563106796116504}, {
          "candy": "Galaxy",
          "type": "不太喜欢",
          "value": 73,
          "percent": 0.039374325782092774
        }, {"candy": "Galaxy", "type": "非常讨厌", "value": 27, "percent": 0.014563106796116505}, {
          "candy": "Twix",
          "type": "非常喜欢",
          "value": 338,
          "percent": 0.18230852211434737
        }, {"candy": "Twix", "type": "挺喜欢", "value": 1051, "percent": 0.5668824163969794}, {
          "candy": "Twix",
          "type": "没什么感觉",
          "value": 349,
          "percent": 0.18824163969795038
        }, {"candy": "Twix", "type": "不太喜欢", "value": 84, "percent": 0.045307443365695796}, {
          "candy": "Twix",
          "type": "非常讨厌",
          "value": 32,
          "percent": 0.017259978425026967
        }, {
          "candy": "Galaxy Caramel",
          "type": "非常喜欢",
          "value": 492,
          "percent": 0.2652291105121294
        }, {
          "candy": "Galaxy Caramel",
          "type": "挺喜欢",
          "value": 845,
          "percent": 0.4555256064690027
        }, {
          "candy": "Galaxy Caramel",
          "type": "没什么感觉",
          "value": 321,
          "percent": 0.1730458221024259
        }, {
          "candy": "Galaxy Caramel",
          "type": "不太喜欢",
          "value": 148,
          "percent": 0.07978436657681941
        }, {"candy": "Galaxy Caramel", "type": "非常讨厌", "value": 49, "percent": 0.026415094339622643}, {
          "candy": "Mars",
          "type": "非常喜欢",
          "value": 287,
          "percent": 0.15471698113207547
        }, {"candy": "Mars", "type": "挺喜欢", "value": 1050, "percent": 0.5660377358490566}, {
          "candy": "Mars",
          "type": "没什么感觉",
          "value": 330,
          "percent": 0.1778975741239892
        }, {"candy": "Mars", "type": "不太喜欢", "value": 138, "percent": 0.07439353099730459}, {
          "candy": "Mars",
          "type": "非常讨厌",
          "value": 50,
          "percent": 0.026954177897574125
        }, {"candy": "Milky Way", "type": "非常喜欢", "value": 289, "percent": 0.1558791801510248}, {
          "candy": "Milky Way",
          "type": "挺喜欢",
          "value": 970,
          "percent": 0.52319309600863
        }, {"candy": "Milky Way", "type": "没什么感觉", "value": 430, "percent": 0.2319309600862999}, {
          "candy": "Milky Way",
          "type": "不太喜欢",
          "value": 117,
          "percent": 0.06310679611650485
        }, {"candy": "Milky Way", "type": "非常讨厌", "value": 48, "percent": 0.025889967637540454}, {
          "candy": "Snickers",
          "type": "非常喜欢",
          "value": 419,
          "percent": 0.2257543103448276
        }, {"candy": "Snickers", "type": "挺喜欢", "value": 781, "percent": 0.4207974137931034}, {
          "candy": "Snickers",
          "type": "没什么感觉",
          "value": 324,
          "percent": 0.17456896551724138
        }, {"candy": "Snickers", "type": "不太喜欢", "value": 158, "percent": 0.08512931034482758}, {
          "candy": "Snickers",
          "type": "非常讨厌",
          "value": 174,
          "percent": 0.09375
        }],
        colorData: [
          {
            brand: 'Kenmore',
            sales: 103902,
            const: 100
          }, {
            brand: 'Craftsman',
            sales: 112352,
            const: 100
          }, {
            brand: 'DieHard',
            sales: 121823,
            const: 100
          }, {
            brand: 'Lands End',
            sales: 154092,
            const: 100
          }, {
            brand: 'Laclyn Smith',
            sales: 182023,
            const: 100
          }, {
            brand: 'Joe Boxer',
            sales: 263523,
            const: 100
          }],
      }
    },
    created: function () {
    },
    mounted: function () {
      this.basicLine();//基础条形图
      this.XYLine();//X轴值自定义+Y轴值自定义
      this.accumulationLine();//堆积条形图
      this.colorLine();//颜色填充条形图
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      basicLine(){
        var Global = F2.Global;
        var chart = new F2.Chart({
          id: 'basicLine',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.basicData, {
          population: {
            tickCount: 5
          }
        });
        chart.coord({
          transposed: true
        });
        chart.axis('country', {
          line: Global._defaultAxis.line,
          grid: null
        });
        chart.axis('population', {
          line: null,
          grid: Global._defaultAxis.grid,
          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.interval().position('country*population');
        chart.render();
      },
      XYLine(){
        var chart = new F2.Chart({
          id: 'XYLine',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.XYData);
        chart.coord({
          transposed: true
        });
        chart.legend({
          align: 'right',
          itemWidth: 50
        });
        chart.axis('cate', {
          line: F2.Global._defaultAxis.line,
          grid: null
        });
        chart.axis('value', {
          line: null,
          grid: F2.Global._defaultAxis.grid,
          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.interval().position('cate*value').color('gender').adjust('stack');
        chart.render();
      },
      accumulationLine(){
        function formatter(val) {
          return (val * 100).toFixed(0) + '%';
        }

        var Shape = F2.Shape;
        var Util = F2.Util;
        var G = F2.G;
        Shape.registerShape('interval', 'text', {
          draw: function draw(cfg, container) {
            var points = this.parsePoints(cfg.points);
            var style = {
              fill: cfg.color,
              z: true // 需要闭合
            };
            var shapes = [];
            var intervalWidth = points[1].x - points[0].x;
            var interval = container.addShape('rect', {
              attrs: Util.mix({
                x: points[0].x,
                y: points[0].y,
                width: intervalWidth,
                height: points[3].y - points[0].y
              }, style)
            }); // 绘制柱形
            shapes.push(interval);
            var origin = cfg.origin._origin; // 获取对应的原始数据
            var textOffsetX = 4;

            var text = new G.Shape.Text({
              attrs: {
                x: points[0].x + textOffsetX,
                y: (points[0].y + points[3].y) / 2,
                text: formatter(origin.percent),
                fill: origin.type === '没什么感觉' ? '#000' : '#fff',
                textAlign: 'start',
                textBaseline: 'middle',
                fontSize: 10
              }
            });
            var textWidth = text.getBBox().width;
            if (textWidth + textOffsetX < intervalWidth) {
              container.add(text);
              shapes.push(text);
            }
            return shapes;
          }
        });
        var colors = {
          '非常喜欢': 'rgb(30,144,255)',
          '挺喜欢': 'rgb(0,191,255)',
          '没什么感觉': 'rgb(135,206,250)',
          '不太喜欢': 'rgb(30,144,255)',
          '非常讨厌': 'rgb(0,191,255)'
        };
        var chart = new F2.Chart({
          id: 'accumulationLine',
          pixelRatio: window.devicePixelRatio,
          padding: [60, 'auto', 'auto', 95]
        });
        chart.source(this.accumulationData, {
          percent: {
            min: 0,
            max: 1,
            nice: false,
            formatter: formatter
          }
        });
        chart.coord({
          transposed: true
        });
        chart.legend({
          marker: 'square',
          clickable: false
        });
        chart.tooltip(false);
        chart.axis('percent', false);
        chart.axis('candy', {
          grid: null
        });
        chart.interval().position('candy*percent').color('type', function(val) {
          return colors[val];
        }).adjust('stack').shape('text');
        chart.render();
      },
      colorLine(){
        function numberToMoney(n) {
          return String(Math.floor(n * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
        var chart = new F2.Chart({
          id: 'colorLine',
          pixelRatio: window.devicePixelRatio,
          padding: [20, 20, 5]
        });
        chart.source(this.colorData);
        chart.coord({
          transposed: true
        });
        chart.axis(false);
        chart.tooltip(false);
        chart.interval().position('brand*const').color('#d9e4eb').size(10).animate(false);
        chart.interval().position('brand*sales').size(10);

        // 绘制文本
        this.colorData.map(function(obj) {
          chart.guide().text({
            position: [obj.brand, 'min'],
            content: obj.brand,
            style: {
              textAlign: 'start',
              textBaseline: 'bottom'
            },
            offsetY: -8
          });
          chart.guide().text({
            position: [obj.brand, 'max'],
            content: '$' + numberToMoney(obj.sales),
            style: {
              textAlign: 'end',
              textBaseline: 'bottom'
            },
            offsetY: -8
          });
        });
        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>
