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

      <div class="chart-wrapper">
        <div class="chart-type">雷达面积图</div>
        <canvas id="radarArea"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">带icon雷达图</div>
        <canvas id="iconRadar"></canvas>
      </div>

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

<script>
  export default {
    data() {
      return {
        basicData: [
          {
            item: 'Design',
            user: '用户 A',
            score: 70
          }, {
            item: 'Design',
            user: '用户 B',
            score: 30
          }, {
            item: 'Development',
            user: '用户 A',
            score: 60
          }, {
            item: 'Development',
            user: '用户 B',
            score: 70
          }, {
            item: 'Marketing',
            user: '用户 A',
            score: 50
          }, {
            item: 'Marketing',
            user: '用户 B',
            score: 60
          }, {
            item: 'Users',
            user: '用户 A',
            score: 40
          }, {
            item: 'Users',
            user: '用户 B',
            score: 50
          }, {
            item: 'Test',
            user: '用户 A',
            score: 60
          }, {
            item: 'Test',
            user: '用户 B',
            score: 70
          }, {
            item: 'Language',
            user: '用户 A',
            score: 70
          }, {
            item: 'Language',
            user: '用户 B',
            score: 50
          }, {
            item: 'Technology',
            user: '用户 A',
            score: 70
          }, {
            item: 'Technology',
            user: '用户 B',
            score: 40
          }, {
            item: 'Support',
            user: '用户 A',
            score: 60
          }, {
            item: 'Support',
            user: '用户 B',
            score: 40
          }],
        iconRadarData: [
          {
            item: '投资经验',
            score: 90,
            img: 'https://gw.alipayobjects.com/zos/rmsportal/txPVjdlnLANzxmwZcchu.png'
          }, {
            item: '财务状况',
            score: 80,
            img: 'https://gw.alipayobjects.com/zos/rmsportal/UMqgEqZdEcPhRekNGAdc.png'
          }, {
            item: '风险承受能力',
            score: 70,
            img: 'https://gw.alipayobjects.com/zos/rmsportal/eBXrRufzPGlOisYGZwnv.png'
          }, {
            item: '风险偏好',
            score: 75,
            img: 'https://gw.alipayobjects.com/zos/rmsportal/zqqWMLXrFwnqhySFHVjZ.png'
          }, {
            item: '投资规划',
            score: 60,
            img: 'https://gw.alipayobjects.com/zos/rmsportal/DxcRoUZXpYOzAWKrlRvv.png'
          }],
      }
    },
    created: function () {
    },
    mounted: function () {
      this.basicRadar();//基础雷达图
      this.radarArea();//雷达面积图
      this.iconRadar();//带icon雷达图
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      basicRadar(){
        var chart = new F2.Chart({
          id: 'basicRadar',
          pixelRatio: window.devicePixelRatio
        });

        chart.coord('polar');
        chart.source(this.basicData, {
          score: {
            min: 0,
            max: 120,
            nice: false,
            tickCount: 4
          }
        });
        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.axis('score', {
          label: function label(text, index, total) {
            if (index === total - 1) {
              return null;
            }
            return {
              top: true
            };
          },
          grid: {
            lineDash: null,
            type: 'arc' // 弧线网格
          }
        });
        chart.axis('item', {
          grid: {
            lineDash: null
          }
        });
        chart.line().position('item*score').color('user');
        chart.point().position('item*score').color('user').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      radarArea(){
        var chart = new F2.Chart({
          id: 'radarArea',
          pixelRatio: window.devicePixelRatio
        });

        chart.coord('polar');
        chart.source(this.basicData, {
          score: {
            min: 0,
            max: 120,
            nice: false,
            tickCount: 4
          }
        });
        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.axis('score', {
          label: function label(text, index, total) {
            if (index === total - 1) {
              return null;
            }
            return {
              top: true
            };
          },
          grid: function grid(text) {
            if (text === '120') {
              return {
                lineDash: null
              };
            }
          },
          line: {
            top: false
          }
        });
        chart.area().position('item*score').color('user').animate({
          appear: {
            animation: 'groupWaveIn'
          }
        });
        chart.line().position('item*score').color('user').animate({
          appear: {
            animation: 'groupWaveIn'
          }
        });
        chart.point().position('item*score').color('user').style({
          stroke: '#fff',
          lineWidth: 1
        }).animate({
          appear: {
            delay: 300
          }
        });

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

        chart.coord('polar', {
          radius: 0.8
        });
        chart.source(this.iconRadarData, {
          score: {
            min: 0,
            max: 100
          }
        });
        chart.tooltip(false);
        chart.axis('item', {
          grid: {
            lineDash: null,
            top: true
          },
          label: null
        });
        chart.axis('score', {
          label: null,
          grid: function grid(text) {
            if (text === '100') {
              return {
                lineDash: null
              };
            }
            return {
              lineWidth: 0
            };
          },
          line: null
        });

        chart.area().position('item*score').style({
          fill: 'r(0.45,0.55,0.15) 0:#fff 0.35:#DEF5F5 0.75:#C8EEEF 1:#A8E5E6',
          fillOpacity: 100
        });

        this.iconRadarData.map(function(obj) {
          var offsetY = obj.item === '风险偏好' || obj.item === '风险承受能力' ? -10 : 0;
          chart.guide().html({
            position: [obj.item, 130],
            html: '<div style="width: 80px;height: 24px;text-align: center;">' + '<img src="' + obj.img + '" style="width: 24px;height: 24px;" />' + '<div style="color: #808080;transform:scale(0.8, 0.8);font-size:12px;">' + obj.item + '</div>' + '</div></div>',
            offsetY: offsetY
          });
        });
        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>
