echarts数据怎么赋值 vue_vue中 怎么把echarts中data的数据循环
export default {
name: 'ranking',
data(){
return {
}
},
methods:{
// 工作質(zhì)態(tài)--警情排名
queryRanking() {
let this_ = this;
this_.$post("這里面放接口", {}).then(res => {
if (res.code == 200) {
//遍歷數(shù)組，取出數(shù)據(jù)
var rankName=[],commonCount=[]
for(var i=0;i
rankName.push(res.data[i].name);
commonCount.push(res.data[i].commonCount);
}
this_.getEchart(rankName,commonCount);
} else {
this_.getEchart([], [], [],[]);
this_.$message("無(wú)結(jié)果");
}
});
},
getEchart(rankName,commonCount){
var rankingChart= echarts.init(document.getElementById('rankEchart'));var option= {title : {
text: '警情排名',
left:'7%',
top:'-1%',
textStyle:{
//文字顏色
color:'#00eeff',
//字體大小
fontSize:19,
fontWeight:'normal',
}
},
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
grid: {
top: '12%',
left: '10%',
right: '15%',
bottom: '0',
containLabel: true
},
yAxis: [{
type: 'category',
data: rankName ,
axisLine: {
show: false,
lineStyle: {
color: '#00eeff'
}
},
axisTick: {
show: false
},
axisLabel: {
color:'#ccc',
fontSize:15
},
}],
xAxis: [{
show: false,
type: 'value'
}],
series: [{
name: '總計(jì)',
type: 'bar',
barWidth: '18%',
// barCategoryGap:10,
data: commonCount,
itemStyle: {
normal: {
color: '#00eeff' ,
label: {
show: true, //開(kāi)啟顯示
position: ['220px','-1px'], //在上方顯示
textStyle: { //數(shù)值樣式
color: '#00eeff',
fontSize: 15
}
}
}
},
}]
};
// 為echarts對(duì)象加載數(shù)據(jù)
rankingChart.setOption(option);
}
},
mounted() {
// this.getEchart();
this.queryRanking();
}
}
總結(jié)
以上是生活随笔為你收集整理的echarts数据怎么赋值 vue_vue中 怎么把echarts中data的数据循环的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java多线程编程—高级主题_Java
- 下一篇： vue移动端通过px动态计算图片宽高_v