百度繪圖庫，Apache ECharts 是一個正在由 Apache 孵化器贊助的 Apache 開源基金會孵化的項目，百度出的庫太牛了，啥功能都有 https://echarts.apache.org 您可以現在就前往 Apache 官網以獲取最新版的網站信息，下面是我總結的一些前端用法，可以配合web框架搞事情。
簡單折線圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=http://echarts.baidu.com/dist/echarts.min.js> </script>
</head>
<body>
<!-- CPU使用率 -->
<div id="main_cpu" 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_cpu'));
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>
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" src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<div id="main" style="height:500px;width:1200px;border:1px solid #eecc11;padding:10px;"></div>
<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>
var time = ["12:10","12:11","12:12","12:13","12:14"]
var cpu = [10,5,25,10,2]
display(time,cpu)
</script>
平滑折線圖：
<script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<div id="main" style="height:500px;width:1200px;border:1px solid #eecc11;padding:10px;"></div>
<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>
var time = ["12:10","12:11","12:12","12:13","12:14"]
var cpu = [10,5,25,10,2]
display(time,cpu)
</script>
兩個線條的圖表
<script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<div id="main" style="height:500px;width:1200px;border:1px solid #eecc11;padding:10px;"></div>
<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,
},
yAxis: {
type: 'value'
},
series: [
{
type:'line',
stack: '總量',
data:load_5
},
{
type:'line',
stack: '總量',
data:load_10
}
]
});
};
myChart.showLoading();
</script>
<script>
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" src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
legend: {
data:['']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
</script>
最后將圖形合並為一個 常用於開發內嵌到頁面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</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 src=http://echarts.baidu.com/dist/echarts.min.js> </script>
<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>
多個線條的繪制。
{% extends "admin/base_site.html" %}
{% load i18n static %}
{% load static %}
{% block content %}
<div id="echo" style="width: 100%; height: 400px; float: left; border:1px solid #9bdf70;background:#f0fbeb;"></div>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
<script>
var echo =echarts.init(document.getElementById("echo"));
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>
{% endblock %}
