本篇文章为大家展示了python中怎么利用Element 实现折线图和饼图，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
计算
安全
数据库
网络和加速
企业服务
<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天各类型告警趋势</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">告警等级分布</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() {
// 页面加载就获取所有模板
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: ['邮件营销', '联盟广告', '搜索引擎']
},
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/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: res.data.data.alarm_device.device_list
},
series: [
{
name: '告警设备分布',
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/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
right: 'right',
data: res.data.data.alarm_level.level_list
},
series: [
{
name: '告警等级分布',
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('请求失败')
}
},'json');
}
}
})
</script>overview/接口返回数据
{
"day_count": {
"type_list": ["基本警报", "中央处理器", "内存", "系统环境", "自定义脚本", "硬盘", "硬件监控"],
"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": "基本警报", "stack": "数量",
"data": [111, 487, 933, 1793, 1834, 1832],
},
{
"type": "line", "name": "中央处理器", "stack": "数量",
"data": [54, 0, 0, 0, 0, 0],
},
{
"type": "line", "name": "内存", "stack": "数量",
"data": [35, 0, 0, 0, 0, 0],
},
{
"type": "line", "name": "系统环境", "stack": "数量",
"data": [18, 0, 16, 12, 2, 1],
},
{
"type": "line", "name": "自定义脚本", "stack": "数量",
"data": [2, 1, 1, 1, 1, 1],
},
{
"type": "line", "name": "硬盘", "stack": "数量",
"data": [6, 4, 4, 5, 4, 9],
},
{
"type": "line", "name": "硬件监控", "stack": "数量",
"data": [31, 3, 3, 6, 10, 4],
}
]
},
"alarm_device": {
"data_list": [
{"name": "基本警报", "value": 88},
{"name": "中央处理器", "value": 54},
{"name": "内存", "value": 35},
{"name": "系统环境", "value": 51},
{"name": "自定义脚本", "value": 8},
{"name": "硬盘", "value": 37},
{"name": "硬件监控", "value": 57}
],
"device_list": ["基本警报", "中央处理器", "内存", "系统环境", "自定义脚本", "硬盘", "硬件监控"]
},
"alarm_level": {
"data_list": [
{"name": "一般", "value": 90},
{"name": "严重", "value": 85},
{"name": "轻微", "value": 36}
],
"level_list": ["一般", "严重", "轻微"]
}
}实现效果
上述内容就是python中怎么利用Element 实现折线图和饼图，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/renpingsheng/blog/3119378
