Shulou(Shulou.com)06/02 Report--

This article shows you how to use Element to achieve line chart and pie chart in python, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

1. Alarm trends of various types of front-end HTML and CSS in the past 7 days

Alarm type distribution alarm level distribution 2. Frontend JS new Vue ({el:'# app', data: {chartLine: null, loading: false}, mounted () {/ / page load and get all templates 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: ['email Marketing', 'Alliance Advertising', 'search engine']} Grid: {left:'3% floor, right:'4% floor, bottom:'3% floor, containLabel: true} XAxis: {type: 'category', boundaryGap: false, data: res.data.data.day_count.day_str_list / / data: [' Monday', 'Tuesday' 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'}, 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} {b}: {c} ({d}%)'}, legend: {orient: 'vertical', left:' left' Data: res.data.data.alarm_device.device_list}, series: [{name: 'alarm device distribution' 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} {b}: {c} ({d}%)'}, legend: {orient: 'vertical', right:' right' Data: res.data.data.alarm_level.level_list}, series: [{name: 'alarm level Distribution' 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 ('request failed')}}, 'json');}}) 3.Django code

Overview/ API returns data

{"day_count": {"type_list": ["basic alarm", "CPU", "memory", "system Environment", "Custom script", "hard disk", "hardware Monitoring"], "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": "basic alert", "stack": "quantity", "data": [111,487,933, 1793, 1834, 1832],} {"type": "line", "name": "CPU", "stack": "quantity", "data": [54,0,0,0,0,0],}, {"type": "line", "name": "memory", "stack": "quantity" "data": [35,0,0,0,0,0],}, {"type": "line", "name": "system environment", "stack": "quantity", "data": [18,0,16,12,2,1],} {"type": "line", "name": "Custom script", "stack": "quantity", "data": [2, 1, 1, 1, 1],}, {"type": "line", "name": "hard disk", "stack": "quantity" "data": [6,4,4,5,4,9],}, {"type": "line", "name": "hardware monitoring", "stack": "quantity", "data": [31, 3, 3, 6, 10, 4],}]} "alarm_device": {"data_list": [{"name": "basic Alert", "value": 88}, {"name": "CPU", "value": 54}, {"name": "memory", "value": 35}, {"name": "system Environment", "value": 51} {"name": "Custom script", "value": 8}, {"name": "hard disk", "value": 37}, {"name": "hardware Monitoring", "value": 57}], "device_list": ["basic Alert", "CPU", "memory", "system Environment" "Custom script", "hard disk", "hardware Monitoring"]}, "alarm_level": {"data_list": [{"name": "General", "value": 90}, {"name": "serious", "value": 85}, {"name": "mild", "value": 36}] "level_list": ["normal", "serious", "mild"]}}

Realize the effect

The above is how to use Element to achieve line chart and pie chart in python. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.