快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

python中怎么利用Element显示柱状图

今天就跟大家聊聊有关python中怎么利用Element显示柱状图，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

目前创新互联公司已为数千家的企业提供了网站建设、域名、网站空间、网站改版维护、企业网站设计、罗庄网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

1.前端HTML和CSS


    
        
            
                
                    告警事件TOP 5
                
                                     
                
                                                                                           设备类型告警TOP 5                                                                                                   

2.前端JS


    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');
            }
        }
    })

3.Django代码

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显示柱状图

python中怎么利用Element显示柱状图

看完上述内容，你们对python中怎么利用Element显示柱状图有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。


名称栏目：python中怎么利用Element显示柱状图
文章转载：http://6mz.cn/article/gsgpeo.html

其他资讯