本文介绍: 这里我要实现的是前端实现类似加速小球样式的内存容量监控图像echart部分代码: <div class=”ibox–content“> <div class=”echarts” id=”main“></div> </div>js读取后端发来的json数据,js代码(这个放在html的开头): setInterval(function () {
<div class="ibox-content">
<div class="echarts" id="main"></div>
</div>js读取后端发来的json数据,js代码(这个放在html的开头):
setInterval(function () {
PieChart();
}, 1000);//每隔1秒执行每次刷新数据的函数
$(function () {
PieChartFirst();
})
//这个是预加载 把饼图的框架加载出来
function PieChartFirst() {
// var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(
{
animation: false, //是否禁用动画效果
title:
{//标题组件
textStyle: {
color: "#333333",
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c}M ({d}%)",
textStyle: { //图例文字的样式
color: '#fff', //文字颜色
fontSize: 10 //文字大小
}
},
graphic: [
// {
// type:"text",
// left:"center",
// top:"40%",
// style:{
// text:"",
// textAlign:"center",
// fill:"#333",
// fontSize:20,
// fontWeight:700
// }
//
//
// }
],
//圆环的颜色
color: ['#26d7cd', '#e0dcdc', '#11abff', '#ffdf6f', '#968ade'],
// 图例
legend: {
// 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
selectedMode: false,
/* orient: 'vertical', */
/* x : 'right', //图例显示在右边
y: 'center', */ //图例在垂直方向上面显示居中
bottom: 0,
itemWidth: 10, //图例标记的图形宽度
itemHeight: 10, //图例标记的图形高度
data: ['已用内存空间', '剩余内存空间'],
textStyle: { //图例文字的样式
color: '#A6A8B6', //文字颜色
fontSize: 10 //文字大小
}
},
series: [
{
name: '内存使用',//代表a的值，系列名称
type: 'pie',
center: ['50%', '45%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
radius: ['45%', '60%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
avoidLabelOverlap: false,
label: {
normal: {
show: true,//是否显示标签标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
position: 'left',
//显示的标签的内容
//a（系列名称），b（数据项名称），c（数值）, d（百分比）
formatter: "{a},{b}:{c}（{d}%）",
},
emphasis: {
//鼠标放在圆环上显示的标签样式
show: true,
textStyle: {
fontSize: '12',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true,//是否显示引导线
length: 10, //百分比引导线
length2: 20 //视觉引导项第二段的长度。
}
},
itemStyle: {
normal: {
borderColor: "#FFFFFF",
borderWidth: 1,
label: {
show: true,
formatter: '{d}%'
},
}
},
// 系列中的数据内容数组。
data: [
{value: 0, name: '已用内存空间'},
{value: 100, name: '剩余内存空间'},
]
}]
}
)
}
//这个是每次刷新的函数 只加载数据 不加载其他的东西
function PieChart() {
$.ajax(
{
url: "/MonitorEchart",
type: "POST",
async: true,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
// alert(res['MemoryUse_Total']);
option = {
series: [
{
// 系列中的数据内容数组。
data: [
{value: res["MemoryUse_Used"], name: '已用内存空间'},
{value: res["MemoryUse_Free"], name: '剩余内存空间'},
]
}
]
};
myChart.setOption(option);
}
}
)
}
html尾部再加上:
Ps:这个必须得在末尾声明 不然会加载不出来图表或者每次显示都会重新加载
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// console.log("2222");
</script>
原文地址:https://blog.csdn.net/jumptigerfu/article/details/123235804
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_22246.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
