前端ECharts框架绘制各种图形

JavaScript/前端
422
0
0
2023-02-16
分享 20 个 Javascript 中的数组方法，收藏
上一篇
JavaScript 前端知识点总结
下一篇
标签   JavaScript库

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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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,
		            width: 18
		        },
		        axisLine: {
		            lineStyle: {
		                width: 18
		            }
		        },
		        axisTick: {
		            show: false
		        },
		        splitLine: {
		            length: 15,
		            lineStyle: {
		                width: 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="width: 32%;height:350px;border:1px solid #dddddd;float: left;margin-right: 8px;"></div>
 <!-- 系统内存 -->
 <div id="main_memory" style="width: 32%;height:350px;border:1px solid #dddddd;float: left;margin-right: 8px;"></div>
 <!-- 磁盘信息 -->
 <div id="main_fssize" style="width: 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>
分享 20 个 Javascript 中的数组方法，收藏
上一篇
JavaScript 前端知识点总结
下一篇