echarts入门(通过axios请求数据)
程序员文章站
2022-07-03 16:33:28
...
echarts入门(axios请求数据)
1. npm 安装 ECharts
npm install echarts --save
2. 下面的是基本结构,里面的数据是静态的(写死的,不是通过接口请求到的)
<template>
<div>
<div id="echart"
style="width : 80%;height : 300px"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
data(){
return{
data : [], //所有分类信息
name : [] //分类名称
}
},
mounted(){
var myChart = echarts.init(document.getElementById('echart'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 36, 10, 10, 20]
}]
});
}
}
</script>
3. 把setOption中的xAxis为自己的数据,使用axios请求数据
注意要把请求数据的代码写在mounted()阶段,和设置项写在一个钩子函数中,不能写在created()阶段。
this.$axios.get('http://127.0.0.1:3000/admin/classify/find').then(req => {
// console.log(req.data.list);
this.data = req.data.list;
let name = this.data.map(item => {
return item.name
})
myChart.setOption({
xAxis: {
data: name
}
});
})
结果如下,下面的分类是我通过axios请求到的
上一篇: beego 获取 axios 请求数据
下一篇: vue 组件间传值
推荐阅读
-
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
-
react通过axios请求数据,用一个bol来判断数据是否加载完成后,渲染在页面上,不用async await和定时器的更好方法
-
iOS开发之如何通过PUT请求上传数据
-
vue axios数据请求get、post方法及实例详解
-
vue axios数据请求及vue中使用axios的方法
-
java 通过发送json,post请求,返回json数据的方法
-
vue axios数据请求get、post方法及实例详解
-
vue axios数据请求及vue中使用axios的方法
-
让axios发送表单请求形式的键值对post数据的实例
-
解决Vue axios post请求,后台获取不到数据的问题方法