echarts（从后台获取数据赋值给echarts）
one<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script src="https://cdn....
·
one
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<style>
#demo {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="app">
<div id="demo"></div> <!-- //先给个id -->
</div>
<script>
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
//定义一个方法
drawchart(id) {
axios.get(url, {
params: {
key1: value1
}
})
.then(res => { //获取到数据赋值给demoOption
console.log(res);
var datas1 = ['200', '400', '600', '800', '500', '600', '550']
// var datas1=[]
// for (let i = 0; i < res.data.list.length; i++) {
// datas1.push(res.data.list[i])
// }
this.charts = echarts.init(document.getElementById(id))
var demoOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: datas1,
type: 'line'
}]
};
this.charts.setOption(demoOption);
})
}
},
mounted() {
this.$nextTick(function () {
this.drawchart('demo')
})
},
})
</script>
</body>
two
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<style>
#demo {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="app">
<div id="demo"></div> <!-- //先给个id -->
</div>
<script>
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
//定义一个方法
drawchart(id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: datas1,
type: 'line'
}]
});
this.charts.setOption(demoOption);
}
},
mounted() {
this.$nextTick(function () {
var thiz = this;
axios.get(url, {
params: {
key1: value1
}
}).then(res => {
console.log(res);
var datas1 = ['200', '400', '600', '800', '500', '600', '550']
// var datas1=[]
// for (let i = 0; i < res.data.list.length; i++) {
// datas1.push(res.data.list[i])
// }
this.drawchart('demo')
})
})
},
})
</script>
</body>
three
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<style>
#demo {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="app">
<div id="demo"></div> <!-- //先给个id -->
</div>
<script>
var datas1 = [820, 932, 901, 934, 1290, 1330, 1320]
var lineDom = document.getElementById("demo");
var lineChart = echarts.init(lineDom);
var demoOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: datas1,
type: 'line'
}]
};
if (demoOption && typeof demoOption === "object") {
axios.get(url, {
params: {
key1: value1
}
})
.then(res => {
console.log(res);
// var datas1=[]
// for (let i = 0; i < res.data.list.length; i++) {
// datas1.push(res.data.list[i])
// }
// demoOption.series[0].data = datas1
lineChart.setOption(demoOption, true);
})
}
</script>
</body>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)