-
Notifications
You must be signed in to change notification settings - Fork 0
/
charts2.html
105 lines (103 loc) · 3.14 KB
/
charts2.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/vue2开发版.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="./js/moment.js"></script>
<script src="js/echarts-min.js"></script>
<body>
<div id="app">
<el-row :gutter="10">
<!-- 导航菜单 -->
<el-col md="8">
<div class="line"></div>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
@select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1"><a href="index.html">首页</a></el-menu-item>
<el-menu-item index="1"><a href="charts.html">图表</a></el-menu-item>
<el-menu-item index="1"><a href="login.html">登录</a></el-menu-item>
</el-menu>
</el-col>
<el-col md="16">
<!-- <span>无症状感染者</span><input type="text" v-model="one.data2" /> -->
<div id="main" style="width: 800px;height:400px;"></div>
</el-col>
</div>
<script>//初始化echarts对象
const vm = new Vue({
el:"#app",
data:{
one:{},//每天的数据
all:[],
name:[],
score:[],
},
methods:{
//初始化图表数据遍历原始all里面的值
getData(){
this.name=[];
this.score=[];
axios.get("/student/getcharts").then(
(res) => {
this.all=res.data
this.all.forEach(d=>{
this.name.push(d.name);
this.score.push(d.score);
})
this.initCharts();
},
(err) => {
console.log("获取失败");
}
);
console.log(this.score)
},
initCharts(){
var mycharts = echarts.init(document.getElementById('main'));
//this.getData();//把all解析为三个数组
console.log(this.name)
mycharts.setOption(this.option);
}
//初始化图表
},
created(){
this.getData()
},
computed:{
option(){
//保存this
var that=this;
var myoption = {
xAxis: {
type: 'category',
data: that.name
},
yAxis: {
type: 'value'
},
series: [
{
data: that.score,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
return myoption;
}
}
})
vm.initCharts()
</script>
</body>
</html>