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

      <div class="chart-wrapper">
        <div class="chart-type">环图</div>
        <canvas id="ringFigure"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">玫瑰图</div>
        <canvas id="roseBread"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">环形进度条</div>
        <canvas id="progressBar"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">带文本饼图</div>
        <canvas id="textBread"></canvas>
      </div>

      <div class="chart-wrapper">
        <div class="chart-type">可点击文本环图</div>
        <canvas id="clickBread"></canvas>
      </div>
    </h-content>
  </h-view>
</template>

<script>
  export default {
    data() {
      return {
        basicData: [
          {
            name: '芳华',
            percent: 0.4,
            a: '1'
          }, {
            name: '妖猫传',
            percent: 0.2,
            a: '1'
          }, {
            name: '机器之血',
            percent: 0.18,
            a: '1'
          }, {
            name: '心理罪',
            percent: 0.15,
            a: '1'
          }, {
            name: '寻梦环游记',
            percent: 0.05,
            a: '1'
          }, {
            name: '其他',
            percent: 0.02,
            a: '1'
          }],
        ringData: [
          {
            name: '股票类',
            percent: 83.59,
            a: '1'
          }, {
            name: '债券类',
            percent: 2.17,
            a: '1'
          }, {
            name: '现金类',
            percent: 14.24,
            a: '1'
          }],
        roseData: [
          {
            year: '2001',
            population: 41.8
          }, {
            year: '2002',
            population: 25.8
          }, {
            year: '2003',
            population: 31.7
          }, {
            year: '2004',
            population: 46
          }, {
            year: '2005',
            population: 28
          }],
        progressBarData: [
          {
            x: '1',
            y: 85
          }],
        textData: [
          {
            name: '其他消费',
            y: 6371664,
            const: 'const'
          }, {
            name: '生活用品',
            y: 7216301,
            const: 'const'
          }, {
            name: '通讯物流',
            y: 1500621,
            const: 'const'
          }, {
            name: '交通出行',
            y: 586622,
            const: 'const'
          }, {
            name: '饮食',
            y: 900000,
            const: 'const'
          }],
        clickData: [
          {
            const: 'const',
            type: '交通出行',
            money: 51.39
          }, {
            const: 'const',
            type: '饮食',
            money: 356.68
          }, {
            const: 'const',
            type: '生活日用',
            money: 20.00
          }, {
            const: 'const',
            type: '住房缴费',
            money: 116.53
          }],
      }
    },
    created: function () {
    },
    mounted: function () {
      this.basicBread();//基础饼图
      this.ringFigure();//环图
      this.roseBread();//玫瑰图
      this.progressBar();//环形进度条
      this.textBread();//带文本饼图
      this.clickBread();//可点击文本环图
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
      basicBread(){
        var map = {
          '芳华': '40%',
          '妖猫传': '20%',
          '机器之血': '18%',
          '心理罪': '15%',
          '寻梦环游记': '5%',
          '其他': '2%'
        };
        var chart = new F2.Chart({
          id: 'basicBread',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.basicData, {
          percent: {
            formatter: function formatter(val) {
              return val * 100 + '%';
            }
          }
        });
        chart.legend({
          position: 'right',
          itemFormatter: function itemFormatter(val) {
            return val + '  ' + map[val];
          }
        });
        chart.tooltip(false);
        chart.coord('polar', {
          transposed: true,
          radius: 0.85
        });
        chart.axis(false);
        chart.interval().position('a*percent').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']).adjust('stack').style({
          lineWidth: 1,
          stroke: '#fff',
          lineJoin: 'round',
          lineCap: 'round'
        }).animate({
          appear: {
            duration: 1200,
            easing: 'bounceOut'
          }
        });

        chart.render();
      },
      ringFigure(){
        var map = {};
        this.ringData.map(function(obj) {
          map[obj.name] = obj.percent + '%';
        });

        var chart = new F2.Chart({
          id: 'ringFigure',
          pixelRatio: window.devicePixelRatio,
          padding: [20, 'auto']
        });
        chart.source(this.ringData, {
          percent: {
            formatter: function formatter(val) {
              return val + '%';
            }
          }
        });
        chart.tooltip(false);
        chart.legend({
          position: 'right',
          itemFormatter: function itemFormatter(val) {
            return val + '    ' + map[val];
          }
        });
        chart.coord('polar', {
          transposed: true,
          innerRadius: 0.7,
          radius: 0.85
        });
        chart.axis(false);
        chart.interval().position('a*percent').color('name', ['#FE5D4D', '#3BA4FF', '#737DDE']).adjust('stack');

        chart.guide().html({
          position: ['50%', '45%'],
          html: '<div style="width: 250px;height: 40px;text-align: center;">' + '<div style="font-size: 16px">总资产</div>' + '<div style="font-size: 16px">133.08 亿</div>' + '</div>'
        });
        chart.render();
      },
      roseBread(){
        var chart = new F2.Chart({
          id: 'roseBread',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.roseData);
        chart.coord('polar');
        chart.legend({
          position: 'right'
        });
        chart.axis(false);
        chart.interval().position('year*population').color('year').style({
          lineWidth: 1,
          stroke: '#fff'
        });
        chart.render();
      },
      progressBar(){
        var fontSize = 24 * (window.innerWidth / 375); // 字体适配不同屏幕
        var chart = new F2.Chart({
          id: 'progressBar',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.progressBarData, {
          y: {
            max: 100,
            min: 0
          }
        });
        chart.axis(false);
        chart.tooltip(false);
        chart.coord('polar', {
          transposed: true,
          innerRadius: 0.8,
          radius: 0.85
        });
        chart.guide().arc({
          start: [0, 0],
          end: [1, 99.98],
          top: false,
          style: {
            lineWidth: 20,
            stroke: '#ccc'
          }
        });
        chart.guide().text({
          position: ['50%', '50%'],
          content: '85%',
          style: {
            fontSize: fontSize,
            fill: '#1890FF'
          }
        });
        chart.interval().position('x*y').size(20).animate({
          appear: {
            duration: 1200,
            easing: 'cubicIn'
          }
        });
        chart.render();
      },
      textBread(){
        var chart = new F2.Chart({
          id: 'textBread',
          pixelRatio: window.devicePixelRatio
        });

        chart.source(this.textData);
        chart.coord('polar', {
          transposed: true,
          radius: 0.75
        });
        chart.legend(false);
        chart.axis(false);
        chart.tooltip(false);

        // 添加饼图文本
        chart.pieLabel({
          sidePadding: 40,
          label1: function label1(textData, color) {
            return {
              text: textData.name,
              fill: color
            };
          },
          label2: function label2(textData) {
            return {
              text: '￥' + String(Math.floor(textData.y * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ','),
              fill: '#808080',
              fontWeight: 'bold'
            };
          }
        });

        chart.interval().position('const*y').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864']).adjust('stack');
        chart.render();
      },
      clickBread(){
        let vm = this
        var chart = new F2.Chart({
          id: 'clickBread',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(this.clickData);
        chart.coord('polar', {
          transposed: true,
          radius: 0.9,
          innerRadius: 0.5
        });
        chart.axis(false);
        chart.legend(false);
        chart.tooltip(false);
        chart.guide().html({
          position: ['50%', '50%'],
          html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
        });
        chart.interval().position('const*money').adjust('stack').color('type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14']);
        chart.pieLabel({
          sidePadding: 30,
          activeShape: true,
          label1: function label1(clickData) {
            return {
              text: '￥' + vm.clickData.money,
              fill: '#343434',
              fontWeight: 'bold'
            };
          },
          label2: function label2(clickData) {
            return {
              text: vm.clickData.type,
              fill: '#999'
            };
          },
          onClick: function onClick(ev) {
            var data = ev.data;
            if (data) {
              $('#title').text(data.type);
              $('#money').text(data.money);
            }
          }
        });
        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>
