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>