碼上歡樂
相關內容    簡體    繁體

前端ECharts框架繪制各種圖形

本文轉載自   查看原文   2021-10-01 19:54   103    Web 前端開發筆記

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>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 matplotlib各圖形繪制 QT 基本圖形繪制 mfc 移動繪制的圖形 Echarts餅圖繪制 echarts繪制多條線 基於SpringMVC框架使用ECharts3.0實現堆疊條形圖的繪制（下篇） MFC圖形繪制_顏色改變 pyecharts繪制圖形 Java入門：繪制簡單圖形 用Path來繪制一些圖形
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM