您好,登錄后才能下訂單哦!
本篇文章為大家展示了python中怎么利用Element 實(shí)現(xiàn)折線圖和餅圖,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
<div class="row charts" id="app"> <div class="col-md-8 col-md-offset-2" v-loading="loading"> <div class="king-block king-block-bordered mb30"> <div class="king-block-header"> <h4 class="king-block-title">近7天各類型告警趨勢(shì)</h4> </div> <div class="king-block-content"> <div id="chart1" ></div> </div> </div> </div> <br> <div class="col-md-4 col-md-offset-2" v-loading="loading"> <div class="king-block king-block-bordered mb30"> <div class="king-block-header"> <h4 class="king-block-title">告警類型分布</h4> </div> <div class="king-block-content"> <div id="chart2" ></div> </div> </div> </div> <div class="col-md-4" v-loading="loading"> <div class="king-block king-block-bordered mb30"> <div class="king-block-header"> <h4 class="king-block-title">告警等級(jí)分布</h4> </div> <div class="king-block-content"> <div id="chart3" ></div> </div> </div> </div> </div>
<script> new Vue({ el: '#app', data: { chartLine: null, loading: false }, mounted() { // 頁(yè)面加載就獲取所有模板 this.init() }, methods: { init() { this.loading = true; axios.get(site_url + "overview/").then(res => { if (res.data.result){ this.loading = false; this.chart1 = echarts.init(document.getElementById('chart1')); this.chart1.setOption({ tooltip: { trigger: 'axis' }, legend: { data: res.data.data.day_count.type_list // data: ['郵件營(yíng)銷', '聯(lián)盟廣告', '搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: res.data.data.day_count.day_str_list // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: res.data.data.day_count.day_count_list }); this.chart2 = echarts.init(document.getElementById('chart2')); this.chart2.setOption({ title: { x: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/> : {c} (hbixo3g%)' }, legend: { orient: 'vertical', left: 'left', data: res.data.data.alarm_device.device_list }, series: [ { name: '告警設(shè)備分布', type: 'pie', radius: '55%', center: ['50%', '60%'], // data: res.data2, data: res.data.data.alarm_device.data_list, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); this.chart3 = echarts.init(document.getElementById('chart3')); this.chart3.setOption({ title: { x: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/> : {c} (z900jlg%)' }, legend: { orient: 'vertical', right: 'right', data: res.data.data.alarm_level.level_list }, series: [ { name: '告警等級(jí)分布', type: 'pie', radius: '55%', center: ['50%', '60%'], data: res.data.data.alarm_level.data_list, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); } else{ this.loading = false; this.$message.error('請(qǐng)求失敗') } },'json'); } } }) </script>
overview/
接口返回?cái)?shù)據(jù)
{ "day_count": { "type_list": ["基本警報(bào)", "中央處理器", "內(nèi)存", "系統(tǒng)環(huán)境", "自定義腳本", "硬盤", "硬件監(jiān)控"], "day_str_list": ["2019-10-04", "2019-10-05", "2019-10-06", "2019-10-07", "2019-10-08", "2019-10-09"], "day_count_list": [ { "type": "line", "name": "基本警報(bào)", "stack": "數(shù)量", "data": [111, 487, 933, 1793, 1834, 1832], }, { "type": "line", "name": "中央處理器", "stack": "數(shù)量", "data": [54, 0, 0, 0, 0, 0], }, { "type": "line", "name": "內(nèi)存", "stack": "數(shù)量", "data": [35, 0, 0, 0, 0, 0], }, { "type": "line", "name": "系統(tǒng)環(huán)境", "stack": "數(shù)量", "data": [18, 0, 16, 12, 2, 1], }, { "type": "line", "name": "自定義腳本", "stack": "數(shù)量", "data": [2, 1, 1, 1, 1, 1], }, { "type": "line", "name": "硬盤", "stack": "數(shù)量", "data": [6, 4, 4, 5, 4, 9], }, { "type": "line", "name": "硬件監(jiān)控", "stack": "數(shù)量", "data": [31, 3, 3, 6, 10, 4], } ] }, "alarm_device": { "data_list": [ {"name": "基本警報(bào)", "value": 88}, {"name": "中央處理器", "value": 54}, {"name": "內(nèi)存", "value": 35}, {"name": "系統(tǒng)環(huán)境", "value": 51}, {"name": "自定義腳本", "value": 8}, {"name": "硬盤", "value": 37}, {"name": "硬件監(jiān)控", "value": 57} ], "device_list": ["基本警報(bào)", "中央處理器", "內(nèi)存", "系統(tǒng)環(huán)境", "自定義腳本", "硬盤", "硬件監(jiān)控"] }, "alarm_level": { "data_list": [ {"name": "一般", "value": 90}, {"name": "嚴(yán)重", "value": 85}, {"name": "輕微", "value": 36} ], "level_list": ["一般", "嚴(yán)重", "輕微"] } }
實(shí)現(xiàn)效果
上述內(nèi)容就是python中怎么利用Element 實(shí)現(xiàn)折線圖和餅圖,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。