louzin
1 year ago
5 changed files with 12336 additions and 17521 deletions
@ -1,23 +1,152 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
{{ this.a }} |
<table style="margin: 0 auto"> |
||||||
</div> |
<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> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
export default { |
import * as echarts from "echarts"; |
||||||
name:"index", |
import $ from "jquery"; |
||||||
data() { |
import axios from "axios"; |
||||||
return { |
|
||||||
a:"aaa", |
window.jQuery = $; |
||||||
} |
window.$ = $; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "index", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
a: "aaa", |
||||||
|
lists: [ |
||||||
|
{ |
||||||
|
tablename: "tb1", |
||||||
|
uuid: this.guid(), |
||||||
}, |
}, |
||||||
methods: { |
{ |
||||||
|
tablename: "tb2", |
||||||
|
uuid: this.guid(), |
||||||
}, |
}, |
||||||
} |
{ |
||||||
</script> |
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)", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
<style lang="less" scoped> |
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> |
<style lang="less" scoped></style> |
||||||
|
Loading…
Reference in new issue