vue polygon example

发表于

cli 3

vue create AAA

cli 2

vue init webpack AAA

version of vue cli

1
vue --version

version of vue

1
npm list vue

2 到 3(4)

1
2
npm uninstall -g vue-cli
npm install -g @vue/cli

前者不行，改用后面 yarn，OK

1
2
yarn global remove vue-cli
yarn global add @vue/cli
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
  <head>
    <title>SVG Graph</title>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="/style.css" />

    <!-- template for the polygraph component. -->
    <script type="text/x-template" id="polygraph-template">
      <g>
        <polygon :points="points"></polygon>
        <circle cx="100" cy="100" r="80"></circle>
        <axis-label
          v-for="(stat, index) in stats"
          :stat="stat"
          :index="index"
          :total="stats.length">2222
        </axis-label>
      </g>
    </script>

    <!-- template for the axis label component. -->
    <script type="text/x-template" id="axis-label-template">
      <text :x="point.x" :y="point.y">{{stat.label}}</text>
    </script>
  </head>
  <body>
    <!-- demo root element -->
    <div id="demo">
      <!-- Use the component -->
      <svg width="200" height="200">
        <polygraph :stats="stats"></polygraph>
      </svg>
      <!-- controls -->
      <div v-for="stat in stats">
        <label>{{stat.label}}</label>
        <input type="range" v-model="stat.value" min="0" max="100" />
        <span>{{stat.value}}</span>
        <button @click="remove(stat)" class="remove">X</button>
      </div>
      <form id="add">
        <input name="newlabel" v-model="newLabel" />
        <button @click="add">Add a Stat</button>
      </form>
      <pre id="raw">{{ stats }}</pre>
    </div>

    <p style="font-size:12px">* input[type="range"] requires IE10 or above.</p>

    <script>
      // The raw data to observe
      var stats = [
        { label: "A", value: 100 },
        { label: "B", value: 100 },
        { label: "C", value: 100 },
        { label: "D", value: 100 },
        { label: "E", value: 100 },
        { label: "F", value: 100 }
      ];

      // A resusable polygon graph component
      Vue.component("polygraph", {
        props: ["stats"],
        template: "#polygraph-template",
        computed: {
          // a computed property for the polygon's points
          points: function() {
            var total = this.stats.length;
            return this.stats
              .map(function(stat, i) {
                var point = valueToPoint(stat.value, i, total);
                return point.x + "," + point.y;
              })
              .join(" ");
          }
        },
        components: {
          // a sub component for the labels
          "axis-label": {
            props: {
              stat: Object,
              index: Number,
              total: Number
            },
            template: "#axis-label-template",
            computed: {
              point: function() {
                return valueToPoint(
                  +this.stat.value + 10,
                  this.index,
                  this.total
                );
              }
            }
          }
        }
      });

      // math helper...
      function valueToPoint(value, index, total) {
        var x = 0;
        var y = -value * 0.8;
        var angle = ((Math.PI * 2) / total) * index;
        var cos = Math.cos(angle);
        var sin = Math.sin(angle);
        var tx = x * cos - y * sin + 100;
        var ty = x * sin + y * cos + 100;
        return {
          x: tx,
          y: ty
        };
      }

      // bootstrap the demo
      new Vue({
        el: "#demo",
        data: {
          newLabel: "",
          stats: stats
        },
        methods: {
          add: function(e) {
            e.preventDefault();
            if (!this.newLabel) return;
            this.stats.push({
              label: this.newLabel,
              value: 100
            });
            this.newLabel = "";
          },
          remove: function(stat) {
            if (this.stats.length > 3) {
              this.stats.splice(this.stats.indexOf(stat), 1);
            } else {
              alert("Can't delete more!");
            }
          }
        }
      });
    </script>
  </body>
</html>