走势图

package.json

@@ -12,6 +12,7 @@
     "bootstrap": "^3.3.7",
     "datatables.net": "^1.10.13",
     "datatables.net-bs": "^1.10.13",
+    "echarts": "^3.7.2",
     "element-ui": "^1.4.4",
     "moment": "^2.18.1",
     "shelljs": "^0.7.7",

src/components/PageHeader.vue

@@ -68,14 +68,14 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="MCPRO服务改进调查"  v-if="voteObj.multiple" :visible.sync="dialogFormVisible" :size='size'>
+    <el-dialog title="MCPRO服务改进调查" v-if="voteObj.multiple" :visible.sync="dialogFormVisible" :size='size'>
 
       <div class="voteTitle">{{ voteObj.title }} （最多选{{voteObj.max}}项）</div><br>
 
       <el-form :model="form">
 
         <el-checkbox-group v-model="opids" :min="0" :max="voteObj.max">
-          <el-form-item :label-width="formLabelWidth" v-for="item in voteObj.options">
+          <el-form-item :label-width="formLabelWidth" v-for="item in voteObj.options" :key="item.key">
             <el-checkbox :label="item.key" :key="item.key">{{item.name}}</el-checkbox>
           </el-form-item>
         </el-checkbox-group>
@@ -111,7 +111,10 @@
       return {
         opids: [],
         cities: cityOptions,
-        voteObj: {},
+        voteObj: {
+          multiple: false,
+          options: []
+        },
         size: 'small',
         dialogFormVisible: false,
         form: {
@@ -144,7 +147,7 @@
 
       var _this = this
 
-      if (location.hash === "#/vote") {
+      if (location.hash === "#/vote" || location.hash === "#/report") {
         return;
       }
 
@@ -163,6 +166,7 @@
       // }
 
 
+
       API.getVote({ user: this.user.id, username: this.user.username }).then((res) => {
 
         this.voteObj = res.data.data
@@ -254,12 +258,31 @@
             , id: 'layerDemo'
             , time: 5000
             , content: '<div style="padding: 20px ;">' + '感谢您的参与,环境会因为您而变得更好。此问卷为您奖励EXP+1!' + '</div>'
-            , btn: '知道了'
+            , btn: ['知道了', '参与下一个投票']
+
             , btnAlign: 'c' //按钮居中
             , shade: 0 //不显示遮罩
             , yes: function () {
               layer.closeAll();
               // _this.dialogFormVisible = true;
+            },
+            btn2: function (index, layero) {
+              //按钮【按钮二】的回调
+              layer.closeAll();
+              //return false 开启该代码可禁止点击该按钮关闭
+
+              API.getVote({ user: _this.user.id, username: _this.user.username }).then((res) => {
+
+                if (res.data.data && res.data.data !== "null") {
+                  _this.voteObj = res.data.data
+                  _this.voteObj.options = JSON.parse(_this.voteObj.options)
+                  _this.dialogFormVisible = true;
+                }
+
+              }, (res) => {
+                console.log(res)
+              });
+
             }
           });
 

src/components/Report.vue

@@ -59,6 +59,10 @@
 				</div>
 			</div>
 
+			<hr>
+
+			<div id="myChart" :style="{width: '100%', height: '400px'}"></div>
+
 
 			<!--<el-table :data="history.data" stripe style="width: 100%">
 				<el-table-column prop="usernamea" label="玩家A" width="180">
@@ -190,7 +194,104 @@
 			}
 		},
 
+		mounted() {
+			this.drawLine();
+		},
+
 		methods: {
+			drawLine() {
+				// 基于准备好的dom，初始化echarts实例
+				let myChart = this.$echarts.init(document.getElementById('myChart'))
+				// 绘制图表
+
+				var colors = ['#5793f3', '#d14a61', '#675bba'];
+
+
+				var option = {
+					title: { text: '战斗场次走势图' },
+					color: colors,
+
+					tooltip: {
+						trigger: 'none',
+						axisPointer: {
+							type: 'cross'
+						}
+					},
+					legend: {
+						data: ['竞技场', '娱乐场']
+					},
+					grid: {
+						top: 70,
+						bottom: 50
+					},
+					xAxis: [
+						{
+							type: 'category',
+							axisTick: {
+								alignWithLabel: true
+							},
+							axisLine: {
+								onZero: false,
+								lineStyle: {
+									color: colors[1]
+								}
+							},
+							axisPointer: {
+								label: {
+									formatter: function (params) {
+										return '娱乐场数  ' + params.value
+											+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
+									}
+								}
+							},
+							data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
+						},
+						{
+							type: 'category',
+							axisTick: {
+								alignWithLabel: true
+							},
+							axisLine: {
+								onZero: false,
+								lineStyle: {
+									color: colors[0]
+								}
+							},
+							axisPointer: {
+								label: {
+									formatter: function (params) {
+										return '竞技场数  ' + params.value
+											+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
+									}
+								}
+							},
+							data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
+						}
+					],
+					yAxis: [
+						{
+							type: 'value'
+						}
+					],
+					series: [
+						{
+							name: '竞技场',
+							type: 'line',
+							xAxisIndex: 1,
+							smooth: true,
+							data: [2.6, 5.9, 9.0, 26.4, 1111.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+						},
+						{
+							name: '娱乐场',
+							type: 'line',
+							smooth: true,
+							data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
+						}
+					]
+				};
+
+				myChart.setOption(option);
+			},
 			searchTextChange: function () {
 				var username = this.username
 				this.renderTable()

src/main.js

@@ -11,6 +11,10 @@ import 'element-ui/lib/theme-default/index.css'
 Vue.use(Element)
 Vue.use(VueX)
 
+// 引入echarts
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts 
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */