/**
* @Author Sean
* @Date 2019/5/8
*/
<template>
    <h-view class="public-style" style="height: 100%">
        <h-content>
          <div class="chart-wrapper" style="background: #50577D;">
            <div class="chart-type">弧形网格线</div>
            <canvas id="arcGridChart"></canvas>
          </div>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {
               basicData : [
                {
                  name: 'Samsung',
                  percent: 21.2
                }, {
                  name: 'Apple',
                  percent: 14.6
                }, {
                  name: 'Huawei',
                  percent: 9.5
                }, {
                  name: 'Oppo',
                  percent: 6.8
                }, {
                  name: 'Vivo',
                  percent: 5.3
                }, {
                  name: 'Others',
                  percent: 42.7
                }],
            }
        },
        created: function () {
        },
        mounted: function () {
          this.arcGridChart();//弧形网格线
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          arcGridChart(){
            var chart = new F2.Chart({
              id: 'arcGridChart',
              pixelRatio: window.devicePixelRatio
            });
            chart.coord('polar', {
              transposed: true,
              endAngle: 2 * Math.PI,
              startAngle: Math.PI / 2,
              innerRadius: 0.3
            });

            chart.source(this.basicData.reverse(), {
              percent: {
                max: 100
              }
            });
            chart.axis('name', {
              grid: {
                lineDash: null,
                type: 'arc'
              },
              line: null,
              label: {
                fontSize: 12,
                fontWeight: 'bold',
                fill: '#E5875B'
              }
            });
            chart.axis('percent', false);
            chart.tooltip(false);
            chart.guide().html({
              position: ['Samsung', 21.2],
              html: '<div style="background: #50577D;font-size: 10px;color: #fff">21.2%</div>',
              alignX: 'center',
              alignY: 'bottom',
              offsetY: -8,
              offsetX: 2
            });
            chart.guide().html({
              position: ['Others', 42.7],
              html: '<div style="background: #50577D;font-size: 10px;color: #fff">42.7%</div>',
              alignX: 'center',
              alignY: 'bottom',
              offsetY: -8,
              offsetX: 2
            });

            chart.interval().position('name*percent').color('#E5875B');

            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>
