hh

src/views/index.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { Bar } from '@antv/g2plot';
+import { Bar, StackedBar, Donut, Column, StateManager } from '@antv/g2plot';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: room } = createNamespacedHelpers('room');
 export default {
@@ -38,26 +38,192 @@ export default {
       this.tongji();
     },
     tongji() {
+      const container = document.getElementById('canvas');
+      const chartsWraper = document.createElement('div');
+      chartsWraper.style.width = '100%';
+      chartsWraper.style.height = '900px';
+      container.appendChild(chartsWraper);
+      const canvasDiv1 = document.createElement('div');
+      canvasDiv1.style.width = '40%';
+      canvasDiv1.style.height = '300px';
+      canvasDiv1.style.marginLeft = '0px';
+      canvasDiv1.style.marginTop = '0px';
+      canvasDiv1.style.float = 'left';
+      canvasDiv1.id = 'canvas1';
+      chartsWraper.appendChild(canvasDiv1);
+
+      const canvasDiv2 = document.createElement('div');
+      canvasDiv2.style.width = '40%';
+      canvasDiv2.style.height = '300px';
+      canvasDiv2.style.marginLeft = '10px';
+      canvasDiv2.style.marginTop = '0px';
+      canvasDiv2.style.float = 'left';
+      canvasDiv2.id = 'canvas2';
+      chartsWraper.appendChild(canvasDiv2);
+
+      const canvasDiv3 = document.createElement('div');
+      canvasDiv3.style.width = '90%';
+      canvasDiv3.style.height = '300px';
+      canvasDiv3.style.marginLeft = '10px';
+      canvasDiv3.style.marginTop = '0px';
+      canvasDiv3.style.float = 'left';
+      canvasDiv3.id = 'canvas3';
+      chartsWraper.appendChild(canvasDiv3);
+
       const data = [];
       for (const room of this.roomInfo) {
-        data.push({ 房间号: room.name, 观看人数: room.number });
+        data.push({ room: room.name, count: room.number });
       }
-      const barPlot = new Bar('canvas', {
+      // 初始化state manager
+      const stateManager = new StateManager();
+      //渲染图表
+      const bar = new StackedBar(canvasDiv1, {
         title: {
           visible: true,
-          text: '各直播房间观看人数',
+          text: '房间观看人数',
         },
-        forceFit: true,
-        pixelRatio: 4,
         data,
-        xField: '观看人数',
-        yField: '房间号',
+        xField: 'count',
+        yField: 'room',
+        tooltip: {
+          visible: false,
+        },
         xAxis: {
           formatter: v => v + '人',
         },
+        color: ['#945fb9', '#1e9493', '#ff9845'],
+      });
+      bar.render();
+      bar.bindStateManager(stateManager, {
+        setState: [
+          {
+            event: 'bar:click',
+            state: e => {
+              const origin = e.target.get('origin').data;
+              const state = { name: 'room', exp: origin.room };
+              return state;
+            },
+          },
+        ],
+        onStateChange: [
+          {
+            name: 'room',
+            callback: (d, plot) => {
+              plot.setSelected(d, {
+                stroke: 'black',
+                lineWidth: 1,
+              });
+              plot.setDefault(
+                origin => {
+                  return origin[d.name] !== d.exp;
+                },
+                {
+                  stroke: null,
+                }
+              );
+            },
+          },
+        ],
+      });
+      const donut = new Donut(canvasDiv2, {
+        title: {
+          visible: true,
+          text: '房间观看总数',
+        },
+        data,
+        angleField: 'count',
+        colorField: 'room',
+        label: {
+          visible: false,
+        },
+        radius: 0.9,
+        annotation: [{ type: 'centralText', onActive: true }],
+      });
+      donut.render();
+      donut.bindStateManager(stateManager, {
+        setState: [
+          {
+            event: 'ring:click',
+            state: e => {
+              const origin = e.target.get('origin').data;
+              const state = { name: 'room', exp: origin.room };
+              return state;
+            },
+          },
+        ],
+        onStateChange: [
+          {
+            name: 'room',
+            callback: (d, plot) => {
+              plot.setSelected(d, {
+                strokeStyle: '#000000',
+                lineWidth: 1,
+              });
+              plot.setDefault(
+                origin => {
+                  return origin[d.name] !== d.exp;
+                },
+                {
+                  stroke: null,
+                }
+              );
+            },
+          },
+        ],
       });
 
-      barPlot.render();
+      const area = new Column(canvasDiv3, {
+        title: {
+          visible: true,
+          text: '房间观看趋势',
+        },
+        forceFit: true,
+        data,
+        xField: 'room',
+        yField: 'count',
+        padding: 'auto',
+        meta: {
+          type: {
+            alias: '房间',
+          },
+          sales: {
+            alias: '人数',
+          },
+        },
+      });
+      area.render();
+
+      area.bindStateManager(stateManager, {
+        setState: [
+          {
+            event: 'room:click',
+            state: e => {
+              const origin = e.target.get('origin').data[0];
+              const state = { name: 'room', exp: origin.room };
+              return state;
+            },
+          },
+        ],
+        onStateChange: [
+          {
+            name: 'room',
+            callback: (d, plot) => {
+              plot.setSelected(d, {
+                strokeStyle: '#000000',
+                lineWidth: 1,
+              });
+              plot.setDefault(
+                origin => {
+                  return origin[d.name] !== d.exp;
+                },
+                {
+                  stroke: null,
+                }
+              );
+            },
+          },
+        ],
+      });
     },
   },
   computed: {