VUE-Echarts渲染数据

<template>
<div class="allStyle">
<div id="reeInfo" class="echartStableshow"></div>
</div>
</template>
<script>
export default {
data () {
return {
reeInfo: {
data: [],
optionGroup: {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow'
// 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
height: 180
},
xAxis: [
{
type: 'category',
data: ['美国', '日本', '英国', '意大利', '德国', '印度', '俄罗斯', '缅甸', '韩国', '尼泊尔'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: 40,
fontsize: 6
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '30%',
itemStyle: {
normal: {
color: 'red'
}
},
label: {
normal: {
color: '#D7000F',
show: true,
distance: -20,
position: 'insideTop'
}
},
data: [12, 21, 3, 13, 9, 46, 17, 32, 25, 8]
}
]
},
},
};
},
methods: {
init: async function () {
this.initChartData();
},
initChartData () {
this.setOption();
},
setOption () {
this.drawChart();
},
/**
* 绘制图表
*/
drawChart () {
let reeInfo = this.$echarts.init(document.getElementById('reeInfo'));
reeInfo.setOption(this.reeInfo.optionGroup);
window.addEventListener('resize', () => {
reeInfo.resize();
});
},
renderEcharts () {
this.$myHttp({
method: 'POST',
url: this.prefix + '/microarch/hgry/flightInfo/getCountryCount',
params: {}
}).then(res => {
let data = res.data;
for (let item in data) {
let target = {};
target.tablename = item;
target.count = data[item];
this.tableData1.push(target);
}
// 开始渲染数据 后续需要封装函数
let length = this.tableData1.length;
this.xData = new Array(10);
this.yData = new Array(10);
for (let i = 0; i < 10; i++) {
this.xData[i] = this.tableData1[i].tablename;
this.yData[i] = this.tableData1[i].count;
}
this.reeInfo.optionGroup.xAxis[0].data = this.xData;
this.reeInfo.optionGroup.series[0].data = this.yData;
// 更新数据之后需要重新渲染
this.init();
// 渲染数据结束
});
},
},
mounted () {
this.$nextTick(() => {
this.init();
});
},
created () {
}
};
</script>
<style lang="scss" scoped>
.allStyle {
.echartStableshow {
margin-top: -10px;
width: auto;
height: 220px;
background: #FFFFFF;
}
}
</style>

最后

以上就是唠叨盼望为你收集整理的VUE-Echarts渲染数据的全部内容，希望文章能够帮你解决VUE-Echarts渲染数据所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。