今天就跟大家聊聊有關(guān)python中怎么利用Element顯示柱狀圖，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

目前創(chuàng)新互聯(lián)公司已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、羅莊網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1.前端HTML和CSS

<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">設(shè)備類型告警TOP 5</h2>
                </div>
                <div class="king-block-content">
                    <div id="chart2" ></div>
                </div>
            </div>
        </div>
    </div>
</div>

2.前端JS

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            fullscreenLoading: false
        },
        mounted() {
            // 頁(yè)面加載就獲取所有模板
            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 : {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                                    type : 'shadow'        // 默認(rèn)為直線，可選為：'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:'數(shù)量',
                                    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 : {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                                    type : 'shadow'        // 默認(rèn)為直線，可選為：'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:'數(shù)量',
                                    type:'bar',
                                    barWidth: '40%',
                                    data: res.data.data.top5_device_type_res.count_list
                                }
                            ]
                        });
                    } else {
                        this.fullscreenLoading = false;
                        this.$message.error('請(qǐng)求失敗')
                    }
                },'json');
            }
        }
    })
</script>

3.Django代碼

top5_data/接口返回?cái)?shù)據(jù)

{
    "top5_title_res": {
        "count_list": [18268, 18273, 18309, 30361, 30398],
        "title_list": [
            "1.18.6.11發(fā)生進(jìn)程端口告警",
            "1.18.6.20發(fā)生進(jìn)程端口告警",
            "1.18.6.13發(fā)生進(jìn)程端口告警",
            "1.18.6.18發(fā)生進(jìn)程端口告警",
            "1.18.6.9發(fā)生進(jìn)程端口告警"
        ]
    },
    "top5_device_type_res": {
        "type_list": ["中央處理器", "內(nèi)存", "硬盤", "基本警報(bào)", "端口"],
        "count_list": [16029, 24217, 51166, 140975, 170223]
    }
}

實(shí)現(xiàn)效果

看完上述內(nèi)容，你們對(duì)python中怎么利用Element顯示柱狀圖有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

新聞標(biāo)題：python中怎么利用Element顯示柱狀圖
鏈接地址：http://chinadenli.net/article40/gsgpeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、網(wǎng)站改版、網(wǎng)站建設(shè)、外貿(mào)建站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)