vue +echart data中的数据动态赋值
今天用vue 往echart中添加数据的时候,遇到了一个问题,就是从后台调取过来数据,怎么动态的赋值给xAxis.我今天做的是把部门动态添加到xaxis下面是效果图下面是打印获取到的值下面是实现的代码index.html<template><div class="department"><div id="department_role" ...
今天用vue 往echart中添加数据的时候,遇到了一个问题,就是从后台调取过来数据,怎么动态的赋值给xAxis.我今天做的是把部门动态添加到xaxis
下面是效果图
下面是打印获取到的值
下面是实现的代码
index.html
<template>
<div class="department">
<div id="department_role" class="department_role" :style="{width: '1000px', height: '350px'}">
</div>
</div>
</template>
index.js
<script>
import {queryTotalAndOnlineCount} from '@/api/adminIndex';
import {
selectRoleAll,
departmentName
}
from "@/api/department";//获取数据的接口
export default {
data(){
return{
tableDataRole:[]
// ['技术部','人事部','策划部','技术部','人事部']
}
},
mounted(){
queryTotalAndOnlineCount().then((res)=>{
this.useronline = res.data
this.drawChart();
})
this.myChart_department_role = this.$echarts.init(document.getElementById("department_role"));
},
created: function() {
this.hadleGetFilesListApi();
this.handdepart();
},
methods:{
// 查询所有部门
hadleGetFilesListApi() {
selectRoleAll()
.then(res => {
this.tableDataRole =res.data.roleInfo ;
console.log(this.tableDataRole)
})
.catch({});
},
// 通过部门名称获取部门人数,部门每个全限的人数
handdepart(){
departmentName(this.tableDataRole[0].name)
.then(res => {
})
},
drawChart(){
let option_department_role = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['部门人数','超级管理员','管理员','普通用户','svip']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [this.tableDataRole[0].name,this.tableDataRole[1].name,
this.tableDataRole[2].name,this.tableDataRole[3].name,this.tableDataRole[4].name]
// data:['技术部','策划部','人事部','组织部','外联部']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'部门人数',
type:'bar',
data:[320, 332, 301,332, 301 ]
},
{
name:'超级管理员',
type:'bar',
// stack: '广告',
data:[120, 132, 101,332, 301 ]
},
{
name:'管理员',
type:'bar',
// stack: '广告',
data:[220, 182, 191,332, 301]
},
{
name:'普通用户',
type:'bar',
// stack: '广告',
data:[150, 232, 201,332, 301 ]
},
{
name:'svip',
type:'bar',
// stack: '广告',
data:[150, 232, 201,332, 301 ]
},
]
};
this.myChart_department_role.setOption(option_department_role);
// this.myChart.setOption(option);
}
}
}
</script>
今天效果是实现了,但有个问题,我是通过自己写下标获取的数据,这样写是没错,但有个问题,如果多了的话就不适用了,我相信会有好的解决办法的,我会在研究一下,如果你们有什么好的实现方式,欢迎留言啊~~~~么么哒
写一个福利,vue引入echart—>可以把这两句引入配置到全局里面,这样都可以用了,引入之前别忘了先下载哦
import echarts from ‘echarts’
//一般都要加个
加
到
v
u
e
的
原
型
链
上
,
方
便
引
用
V
u
e
.
p
r
o
t
o
t
y
p
e
.
加到vue的原型链上,方便引用 Vue.prototype.
加到vue的原型链上,方便引用Vue.prototype.echarts = echarts;
更多推荐
所有评论(0)