github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/libs/vue-1.0.24/examples/svg/svg.js (about)

     1  // The raw data to observe
     2  var stats = [
     3    { label: 'A', value: 100 },
     4    { label: 'B', value: 100 },
     5    { label: 'C', value: 100 },
     6    { label: 'D', value: 100 },
     7    { label: 'E', value: 100 },
     8    { label: 'F', value: 100 }
     9  ]
    10  
    11  // A resusable polygon graph component
    12  Vue.component('polygraph', {
    13    props: ['stats'],
    14    template: '#polygraph-template',
    15    replace: true,
    16    computed: {
    17      // a computed property for the polygon's points
    18      points: function () {
    19        var total = this.stats.length
    20        return this.stats.map(function (stat, i) {
    21          var point = valueToPoint(stat.value, i, total)
    22          return point.x + ',' + point.y
    23        }).join(' ')
    24      }
    25    },
    26    components: {
    27      // a sub component for the labels
    28      'axis-label': {
    29        props: {
    30          stat: Object,
    31          index: Number,
    32          total: Number
    33        },
    34        template: '#axis-label-template',
    35        replace: true,
    36        computed: {
    37          point: function () {
    38            return valueToPoint(
    39              +this.stat.value + 10,
    40              this.index,
    41              this.total
    42            )
    43          }
    44        }
    45      }
    46    }
    47  })
    48  
    49  // math helper...
    50  function valueToPoint (value, index, total) {
    51    var x     = 0
    52    var y     = -value * 0.8
    53    var angle = Math.PI * 2 / total * index
    54    var cos   = Math.cos(angle)
    55    var sin   = Math.sin(angle)
    56    var tx    = x * cos - y * sin + 100
    57    var ty    = x * sin + y * cos + 100
    58    return {
    59      x: tx,
    60      y: ty
    61    }
    62  }
    63  
    64  // bootstrap the demo
    65  new Vue({
    66    el: '#demo',
    67    data: {
    68      newLabel: '',
    69      stats: stats
    70    },
    71    methods: {
    72      add: function (e) {
    73        e.preventDefault()
    74        if (!this.newLabel) return
    75        this.stats.push({
    76          label: this.newLabel,
    77          value: 100
    78        })
    79        this.newLabel = ''
    80      },
    81      remove: function (stat) {
    82        if (this.stats.length > 3) {
    83          this.stats.$remove(stat)
    84        } else {
    85          alert('Can\'t delete more!')
    86        }
    87      }
    88    }
    89  })