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>

文章出处：https://www.cnblogs.com/lyshark

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

博主警告：如果您恶意转载本人文章，则您的整站文章，将会变为我的原创作品，请相互尊重！

查看全文

相关阅读:
Get distinct count of rows in the DataSet
单引号双引号的html转义符
 PETS Public English Test System
Code 39 basics (39条形码原理)
Index was outside the bounds of the array ,LocalReport.Render
Thread was being aborted Errors
Reportviewer Error: ASP.NET session has expired
ReportDataSource 值不在预期的范围内
 .NET/FCL 2.0在Serialization方面的增强
 Perl像C一样强大，像awk、sed等脚本描述语言一样方便。

原文地址：https://www.cnblogs.com/LyShark/p/15359966.html