今天就跟大家聊聊有关python中怎么利用Element显示柱状图，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
<div id="app"> <div class="row charts" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"> <div class="col-md-6 col-md-offset-3"> <div class="king-block king-block-bordered mb30"> <div class="king-block-header"> <h2 class="king-block-title">告警事件TOP 5</h2> </div> <div class="king-block-content"> <div id="chart1" ></div> </div> </div> </div> </div> <div class="row charts" > <div class="col-md-6 col-md-offset-3"> <div class="king-block king-block-bordered mb30"> <div class="king-block-header"> <h2 class="king-block-title">设备类型告警TOP 5</h2> </div> <div class="king-block-content"> <div id="chart2" ></div> </div> </div> </div> </div> </div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
fullscreenLoading: false
},
mounted() {
// 页面加载就获取所有模板
this.init()
},
methods: {
init() {
this.fullscreenLoading = true;
axios.get(site_url + "top5_data/").then(res => {
if (res.data.result) {
this.fullscreenLoading = false;
this.chart1 = echarts.init(document.getElementById('chart1'));
this.chart1.setOption({
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'category',
data : res.data.data.top5_title_res.title_list,
axisTick: {
alignWithLabel: true
}
}
],
series : [
{
name:'数量',
type:'bar',
barWidth: '40%',
data: res.data.data.top5_title_res.count_list
}
]
});
this.chart2 = echarts.init(document.getElementById('chart2'));
this.chart2.setOption({
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'category',
data : res.data.data.top5_device_type_res.type_list,
axisTick: {
alignWithLabel: true
}
}
],
series : [
{
name:'数量',
type:'bar',
barWidth: '40%',
data: res.data.data.top5_device_type_res.count_list
}
]
});
} else {
this.fullscreenLoading = false;
this.$message.error('请求失败')
}
},'json');
}
}
})
</script>top5_data/接口返回数据
{
"top5_title_res": {
"count_list": [18268, 18273, 18309, 30361, 30398],
"title_list": [
"1.18.6.11发生进程端口告警",
"1.18.6.20发生进程端口告警",
"1.18.6.13发生进程端口告警",
"1.18.6.18发生进程端口告警",
"1.18.6.9发生进程端口告警"
]
},
"top5_device_type_res": {
"type_list": ["中央处理器", "内存", "硬盘", "基本警报", "端口"],
"count_list": [16029, 24217, 51166, 140975, 170223]
}
}实现效果
看完上述内容，你们对python中怎么利用Element显示柱状图有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
