zoukankan      html  css  js  c++  java
  • 前端ECharts框架绘制各种图形

    ECharts 是一个开源的来自百度前端数据可视化团队,使用 JavaScript 实现的开源可视化库,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,涵盖各行业图表,满足各种需求。

    实现简单折线图: 首先我们来实现一个简单的单折现图.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    
    <!--绘图区域-->
    <div id="main" style=" 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
    
    <script type="text/javascript" charset="UTF-8">
        var display = function(time,cpu){
            var myChart_cpu = echarts.init(document.getElementById('main'));
        myChart_cpu.setOption({
            title: {
    
                text: '监控'
            },
            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: 'cpu',
                type: 'line',
                data: []
            }]
        });
        // 下方就是给指定字段填充数据
        myChart_cpu.setOption({
            xAxis: {
                data: time
            },
            series: [{
                name: 'cpu',
                data: cpu
            }]
            });
        };
        // 首次显示加载动画
        myChart_cpu.showLoading();
    </script>
    	<!-- 传入参数调用 -->
    	<script type="text/javascript" charset="UTF-8">
    		var time = ["12:10","12:11","12:12","12:13","12:13","12:13"]
    		var mem = [10,20,30,40,10,2]
    		display(time,mem)
    	</script>
    </body>
    </html>
    

    当我们需要增加颜色时,可以直接使用下面的这段绘图方法,绘制的图形会增加颜色区域.

    <script type="text/javascript" charset="UTF-8">
        var display = function(time,cpu){
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            xAxis:{
                type:"category",
                boundaryGap:false,
                data:[]
            },
            yAxis:{
                type:"value"
            },
            series:[{
                data:[],
                type:"line",
                areaStyle:{}
            }]
        });
        myChart.setOption({
            xAxis: {
                    data: time
                },
            series: [{
                    data: cpu
                }]
            });
        };
        myChart.showLoading();
    </script>
    

    如果需要绘制曲线,而非折线可以使用下面这种绘制方式.

    <script type="text/javascript" charset="UTF-8">
        var display = function(time,cpu){
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            xAxis:{
                type:"category",
                data:[]
            },
            yAxis:{
                type:"value"
            },
            series:[{
                data:[],
                type:"line",
                smooth:true
            }]
        });
        myChart.setOption({
            xAxis: {
                    data: time
                },
            series: [{
                    data: cpu
                }]
            });
        };
        myChart.showLoading();
    </script>
    

    实现多折线绘图: 多折现则是在一张图中绘制多条折线,并且可以增加注释效果,代码如下.

    <script type="text/javascript" charset="UTF-8">
        var display = function(time,load_5,load_10){
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            xAxis: {
                type: 'category',
                boundaryGap: false,
            },
            xAxis: {
                    data: time
                },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type:'line',
                    stack: '总量',
                    data:load_5
                },
                {
                    type:'line',
                    stack: '总量',
                    data:load_10
                }
            ]
            });
        };
        myChart.showLoading();
    </script>
    <script type="text/javascript" charset="UTF-8">
    	var time = ["12:10","12:11","12:12","12:13","12:14"]
    	var load_5 =  [10,5,25,10,2]
    	var load_10 = [24,37,15,18,9]
    	display(time,load_5,load_10)
    </script>
    

    有时双折线无法满足我们需求,此时可以使用三折线来展示,如下代码.

    <script type="text/javascript" charset="UTF-8">
    	var echo =echarts.init(document.getElementById("main"));
    	var option = {
    	    title: {
    	        left: 'left',
    	        text: 'CPU',
    	    },
    	    // tooltip 鼠标放上去之后会自动出现坐标
    	    tooltip: {
    	        trigger: 'axis',
    	        axisPointer: {
    	            type: 'cross',
    	            label: {
    	                backgroundColor: '#6a7985'
    	            }
    	        }
    	    },
    	    // toolbox = 菜单栏中的各种小功能
    	    toolbox: {
    	        feature: {
    	            dataZoom: {
    	                yAxisIndex: 'none'
    	            },
    	            restore: {},
    	            saveAsImage: {}
    	        }
    	    },
    	    legend: {
    	        data: ['CPU利用率', '1分钟负载', '5分钟负载', '15分钟负载']
    	    },
    
    	    xAxis: {
    	        type: 'category',
    	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [{
    	        name: "CPU利用率",
    	        stack: "总量",
    	        data: [10, 54, 87, 66, 54, 88, 95],
    	        type: 'line'
    	    },
    	    {
    	        name: "1分钟负载",
    	        stack: "总量",
    	        data: [10, 25, 99, 87, 54, 66, 2],
    	        type: 'line'
    	    },
    	    {
    	        name: "5分钟负载",
    	        stack: "总量",
    	        data: [89, 57, 85, 44, 25, 4, 54],
    	        type: 'line'
    	    },
    	    {
    	        name: "15分钟负载",
    	        stack: "总量",
    	        data: [1, 43, 2, 12, 5, 4, 7],
    	        type: 'line'
    	    }
    	    ]
    	};
    	echo.setOption(option,true);
    </script>
    

    绘制简单柱状图: 先来绘制一个简单的柱状图.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    
    <!--绘图区域-->
    <div id="main" style=" 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
    <script type="text/javascript" charset="UTF-8">
        var display = function(time,cpu)
        {
           	var myChart = echarts.init(document.getElementById('main'));
    	    var option = {
    	        tooltip: {},
    	        legend: {
    	            data:['']
    	        },
    	        xAxis: {
    	            data: time
    	        },
    	        yAxis: {},
    	        series: [{
    	            name: '利用率',
    	            type: 'bar',
    	            data: cpu
    	        }]
    	    };
    	    myChart.setOption(option);
        };
    </script>
    
    	<script type="text/javascript" charset="UTF-8">
    		var time = ["12:10","12:11","12:12","12:13","12:13","12:13"]
    		var mem = [10,20,30,40,10,2]
    		display(time,mem)
    	</script>
    </body>
    </html>
    

    为柱状图增加背景色,让其更加美观,代码如下。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    
    <!--绘图区域-->
    <div id="main" style=" 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
    
    <script type="text/javascript" charset="UTF-8">
        var display = function(time,cpu)
        {
           	var myChart = echarts.init(document.getElementById('main'));
    	    var option = {
    	        tooltip: {},
    	        legend: {
    	            data:['']
    	        },
    	        xAxis: {
    	            type: 'category',
            		data: time
    	        },
    	        yAxis: { type:'value'},
    	        series: [{
    		        data: cpu,
    		        type: 'bar',
    		        showBackground: true,
    		        backgroundStyle: {
    		            color: 'rgba(180, 180, 180, 0.2)'
            		}
    	        }]
    	    };
    	    myChart.setOption(option);
        };
    </script>
    	<script type="text/javascript" charset="UTF-8">
    		var time = ["12:10","12:11","12:12","12:13","12:13","12:13"]
    		var mem = [10,20,30,40,10,2]
    		display(time,mem)
    	</script>
    </body>
    </html>
    

    绘制数据集: 数据集条形图是两个图和三个图组合的形式,如下代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    
    <!--绘图区域-->
    <div id="main" style=" 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
    <script type="text/javascript" charset="UTF-8">
        var display = function()
        {
           	var myChart = echarts.init(document.getElementById('main'));
    	    var option = {
    		    legend: {},
    		    tooltip: {},
    		    dataset: {
    		        source: [
    		            ['product', '一分钟负载', '五分钟负载', '十分钟负载'],
    		            ['192.168.1.1', 43.3, 85.8, 93.7],
    		            ['192.168.1.2', 83.1, 73.4, 55.1],
    		            ['192.168.1.3', 86.4, 65.2, 82.5]
    		        ]
    		    },
    		    xAxis: {type: 'category'},
    		    yAxis: {},
    		    series: [
    		        {type: 'bar'},
    		        {type: 'bar'},
    		        {type: 'bar'}
    		    ]
    	    };
    	    myChart.setOption(option);
        };
    </script>
    	<script type="text/javascript" charset="UTF-8">
    		display()
    	</script>
    </body>
    </html>
    

    绘制横向条形图: 横向条形图也是最常用的图形,如下代码已封装好。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    
    <!--绘图区域-->
    <div id="main" style=" 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
    <script type="text/javascript" charset="UTF-8">
        var display = function(header,data_mem_free,data_mem_swap)
        {
           	var myChart = echarts.init(document.getElementById('main'));
    	    var option = {
    
    
    			    tooltip: {
    			        trigger: 'axis',
    			        axisPointer: {
    			            type: 'shadow'
    			        }
    			    },
    			    legend: {
    			        data: ['主内存', '虚拟内存']
    			    },
    			    grid: {
    			        left: '3%',
    			        right: '4%',
    			        bottom: '3%',
    			        containLabel: true
    			    },
    			    xAxis: {
    			        type: 'value',
    			        boundaryGap: [0, 0.01]
    			    },
    			    yAxis: {
    			        type: 'category',
    			        data: header
    			    },
    			    series: [
    			        {
    			            name: '主内存',
    			            type: 'bar',
    			            data: data_mem_free
    			        },
    			        {
    			            name: '虚拟内存',
    			            type: 'bar',
    			            data: data_mem_swap
    			        }
    			    ]
    	    };
    	    myChart.setOption(option);
        };
    </script>
    	<script type="text/javascript" charset="UTF-8">
    		var address = ["192.168.1.1","192.168.1.2","192.168.1.3"];
    		var bar_a = [12,55,78];
    		var bar_b = [55,89,33];
    		display(address,bar_a,bar_b);
    	</script>
    </body>
    </html>
    

    简单绘制饼状图: 饼状图的绘制与前面的方法大体一致,绘制代码如下。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    <div id="main" style=" 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
    <script type="text/javascript" charset="UTF-8">
        var display = function(dict)
        {
           	var myChart = echarts.init(document.getElementById('main'));
    	    var option = {
    			    title: {
    			        text: '运维系统版本',
    			        left: 'center'
    			    },
    			    tooltip: {
    			        trigger: 'item'
    			    },
    			    legend: {
    			        orient: 'vertical',
    			        left: 'left',
    			    },
    			    series: [
    			        {
    			            type: 'pie',
    			            radius: '50%',
    			            data: dict,
    			            emphasis: {
    			                itemStyle: {
    			                    shadowBlur: 10,
    			                    shadowOffsetX: 0,
    			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
    			                }
    			            }
    			        }
    			    ]
    	    };
    	    myChart.setOption(option);
        };
    </script>
    
    	<script type="text/javascript" charset="UTF-8">
    		var dict = [{value: 1048, name: 'Windows'},{value: 735, name: 'Linux'},{value: 580, name: 'AIX'}];
    		display(dict);
    	</script>
    </body>
    </html>
    

    饼状图还有第二种方式,就是将中间掏空,实现的环形饼图,代码如下。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    <div id="main" style=" 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
    <script type="text/javascript" charset="UTF-8">
        var display = function(dict)
        {
           	var myChart = echarts.init(document.getElementById('main'));
    	    var option = {
    	    	    tooltip: {
    			        trigger: 'item'
    			    },
    			    legend: {
    			        top: '5%',
    			        left: 'center'
    			    },
    			    series: [
    			        {
    			            type: 'pie',
    			            radius: ['40%', '70%'],
    			            avoidLabelOverlap: false,
    			            itemStyle: {
    			                borderRadius: 10,
    			                borderColor: '#fff',
    			                borderWidth: 2
    			            },
    			            label: {
    			                show: false,
    			                position: 'center'
    			            },
    			            emphasis: {
    			                label: {
    			                    show: true,
    			                    fontSize: '40',
    			                    fontWeight: 'bold'
    			                }
    			            },
    			            labelLine: {
    			                show: false
    			            },
    			            data: dict
    			        }
    			    ]
    	    };
    	    myChart.setOption(option);
        };
    </script>
    
    	<script type="text/javascript" charset="UTF-8">
    		var dict = [{value: 1048, name: 'Windows'},{value: 735, name: 'Linux'},{value: 580, name: 'AIX'}];
    		display(dict);
    	</script>
    </body>
    </html>
    

    绘制仪表盘: 仪表盘与饼图类似,其绘制方式与饼图相同,唯一区别是仪表盘只有一个百分比参数。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    <div id="main" style=" 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
    <script type="text/javascript" charset="UTF-8">
        var display = function(speed)
        {
           	var myChart = echarts.init(document.getElementById('main'));
    	    var option = {
    		    series: [{
    		        type: 'gauge',
    		        progress: {
    		            show: true,
    		             18
    		        },
    		        axisLine: {
    		            lineStyle: {
    		                 18
    		            }
    		        },
    		        axisTick: {
    		            show: false
    		        },
    		        splitLine: {
    		            length: 15,
    		            lineStyle: {
    		                 2,
    		                color: '#999'
    		            }
    		        },
    		        axisLabel: {
    		            distance: 25,
    		            color: '#999',
    		            fontSize: 20
    		        },
    		        anchor: {
    		            show: true,
    		            showAbove: true,
    		            size: 25,
    		            itemStyle: {
    		                borderWidth: 10
    		            }
    		        },
    		        title: {
    		            show: false
    		        },
    		        detail: {
    		            valueAnimation: true,
    		            fontSize: 80,
    		            offsetCenter: [0,'70%']
    		        },
    		        data: [{
    		            value: speed
    		        }]
    		    }]
    	    };
    	    myChart.setOption(option);
        };
    </script>
    	<script type="text/javascript" charset="UTF-8">
    		var speed = 85;
    		display(speed);
    	</script>
    </body>
    </html>
    

    最后就是将多个仪表盘合并在一个图形框架中,实现多图形聚合,代码如下。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
    </head>
    <body>
    
     <!-- cpu使用率 -->
     <div id="main_cpu" style=" 32%;height:350px;border:1px solid #dddddd;float: left;margin-right: 8px;"></div>
     <!-- 系统内存 -->
     <div id="main_memory" style=" 32%;height:350px;border:1px solid #dddddd;float: left;margin-right: 8px;"></div>
     <!-- 磁盘信息 -->
     <div id="main_fssize" style=" 32%;height:350px;border:1px solid #dddddd;float: left;margin-right: 8px;"></div>
    
    <script>
        var myChart_cpuutils = echarts.init(document.getElementById('main_cpu'));
            option_cpuutils = {
                series: [
                    {
                        name: 'CPU利用率',
                        type: 'gauge',
                        detail: {formatter:'{value}%'},
                        data: [{value: [12], name: 'CPU使用率'}]
                    }
                ]
            };
            myChart_cpuutils.showLoading();
            setInterval(function () {
                myChart_cpuutils.hideLoading();
                myChart_cpuutils.setOption(option_cpuutils, true);
            },2000);
    </script>
    <script>
         var myChart_fssize = echarts.init(document.getElementById('main_fssize'));
                option_fssize = {
                    series : [
                        {
                            name: '磁盘情况',
                            type: 'pie',
                            radius: '80%',
                            roseType: 'angle',
                            detail: {formatter:'{value}'},
                            data:[
                                {value: 20, name:'磁盘用量'},
                                {value: 80, name:'磁盘空闲'}
    
                            ]
                        }
                    ]
                };
                myChart_fssize.showLoading();
                setInterval(function () {
                    myChart_fssize.hideLoading();
                    myChart_fssize.setOption(option_fssize, true);
                },2000);
    </script>
    <script>
        var myChart_memory = echarts.init(document.getElementById('main_memory'));
            option_memory = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series : [
                {
                    type: 'pie',
                    radius : '80%',
                    center: ['50%', '50%'],
                    data:[
                        {value:100, name:'已用'},
                        {value:800, name:'剩余'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart_memory.showLoading();
        setInterval(function () {
            myChart_memory.hideLoading();
            myChart_memory.setOption(option_memory, true);
        },2000);
    </script>
    </body>
    </html>
    

    版权声明: 本博客,文章与代码均为学习时整理的笔记,博客中除去明确标注有参考文献的文章,其他文章 均为原创 作品,转载请务必 添加出处 ,您添加出处是我创作的动力!

    博主警告:如果您恶意转载本人文章,则您的整站文章,将会变为我的原创作品,请相互尊重!
  • 相关阅读:
    加密配置节
    配置使用 SQL Server提供程序 。
    文件上传
    未能正确加载包"visla Studio HTM Editor Package" 问题的解决
    AspNetPager分页控件的使用
    配置MIME一览
    摸器械的结果。。。
    爱一个人
    这两天怪哉。。。
    “落花有意随流水,流水无情恋落花。”出处
  • 原文地址:https://www.cnblogs.com/LyShark/p/15359966.html
Copyright © 2011-2022 走看看