louzin
1 year ago
5 changed files with 12336 additions and 17521 deletions
@ -1,23 +1,152 @@
|
||||
<template> |
||||
<div> |
||||
{{ this.a }} |
||||
<table style="margin: 0 auto"> |
||||
<thead> |
||||
<th>Once</th> |
||||
<th>Pocitod</th> |
||||
</thead> |
||||
<tbody> |
||||
<tr v-for="(list, index) in lists" :key="list.guid"> |
||||
<td>{{ index }}</td> |
||||
<td>{{ list.tablename }}</td> |
||||
<td></td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
<div id="myChart" style="width: 600px; height: 400px"></div> |
||||
<div id="myChart2" style="width: 600px; height: 400px"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import $ from "jquery"; |
||||
import axios from "axios"; |
||||
|
||||
window.jQuery = $; |
||||
window.$ = $; |
||||
|
||||
export default { |
||||
name: "index", |
||||
data() { |
||||
return { |
||||
a: "aaa", |
||||
} |
||||
lists: [ |
||||
{ |
||||
tablename: "tb1", |
||||
uuid: this.guid(), |
||||
}, |
||||
{ |
||||
tablename: "tb2", |
||||
uuid: this.guid(), |
||||
}, |
||||
{ |
||||
tablename: "tb3", |
||||
uuid: this.guid(), |
||||
}, |
||||
{ |
||||
tablename: "tb4", |
||||
uuid: this.guid(), |
||||
}, |
||||
], |
||||
iplist: [ |
||||
{ value: 1048, name: "Search Engine" }, |
||||
{ value: 735, name: "Direct" }, |
||||
{ value: 580, name: "Email" }, |
||||
{ value: 484, name: "Union Ads" }, |
||||
{ value: 300, name: "Video Ads" }, |
||||
], |
||||
}; |
||||
}, |
||||
methods: { |
||||
guid() { |
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { |
||||
var r = (Math.random() * 16) | 0, |
||||
v = c == "x" ? r : (r & 0x3) | 0x8; |
||||
return v.toString(16); |
||||
}); |
||||
}, |
||||
drawLine() { |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById("myChart")); |
||||
// 绘制图表 |
||||
myChart.setOption({ |
||||
title: { |
||||
text: "ECharts 入门示例", |
||||
}, |
||||
tooltip: {}, |
||||
xAxis: { |
||||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], |
||||
}, |
||||
yAxis: {}, |
||||
series: [ |
||||
{ |
||||
name: "销量", |
||||
type: "bar", |
||||
data: [5, 20, 36, 10, 10, 20], |
||||
}, |
||||
], |
||||
}); |
||||
}, |
||||
drawLine3() { |
||||
var chartDom = document.getElementById("myChart2"); |
||||
var myChart = echarts.init(chartDom); |
||||
var option; |
||||
option = { |
||||
title: { |
||||
text: "Referer of a Website", |
||||
subtext: "Fake Data", |
||||
left: "center", |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
legend: { |
||||
orient: "vertical", |
||||
left: "left", |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "Access From", |
||||
type: "pie", |
||||
radius: "50%", |
||||
data: this.iplist, |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: "rgba(0, 0, 0, 0.5)", |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
option && myChart.setOption(option); |
||||
}, |
||||
upmydata() { |
||||
console.log(this.iplist); |
||||
axios |
||||
.post("http://localhost:8080/getpv", {}) |
||||
.then((res) => { |
||||
console.log(res.data); |
||||
this.iplist = res.data; |
||||
console.log(this.iplist); |
||||
console.log("正在重新赋值"); |
||||
console.log("更新完成"); |
||||
this.drawLine3(); |
||||
}) |
||||
.catch(function (error) { |
||||
console.log(error); |
||||
}); |
||||
}, |
||||
}, |
||||
} |
||||
mounted() { |
||||
this.upmydata(); |
||||
this.drawLine(); |
||||
this.drawLine3(); |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
|
||||
</style> |
||||
<style lang="less" scoped></style> |
||||
|
Loading…
Reference in new issue