使用百度echarts制作可视化大屏

先看一下效果图（部分）

  

我们现在就来完成这个第一个环形进度条。

1、下载百度echarts和jquery，添加到你的页面中；

2、设计背景图片，尺寸为正好铺满大屏，因为大部分大屏都是本地运作，所以只考虑质量不考虑文件大小，然后设计CSS将背景图引入；

body,html{width:100%;height:100%;margin:0px;padding:0px;font-size:12px;color:#555;background-color:#000;font-family:'微软雅黑'}

#main{width:4352px;height:1536px;display:inline-block; background:url(../images/war_room_main.png) left top no-repeat}

这里的main就是大屏背景了。

3、定义echarts部件容器，放到网页中，因为要自由布局，所以选用绝对定位；

#y_gauge1{width:250px;height:250px;position:absolute;left:60px;top:200px;}

4、新建js文件，加入echarts的部件和属性的定义，值为null；

var y_gauge1 =null;

var option_Progress =null;

5、在$(document).ready中初始化部件和属性（防止容器未加载就开始渲染图形）；

$(document).ready(function ()
{
//环形进度条设置对象
option_Progress={
title : {
text: '目前进度',
subtext: '50%',
x: 'center',
y: 90,
itemGap: 10,
textStyle : {
color : '#B7E1FF',
fontWeight: 'normal',
fontFamily : '微软雅黑',
fontSize : 24
},
subtextStyle:{
color: '#B7E1FF',
fontWeight: 'bolder',
fontSize:24,
fontFamily : '微软雅黑'
}
},
series : [{
type : 'pie',
center : ['50%', '50%'],
radius : [75,90],
x: '0%',
tooltip:{show:false},
data : [{
name:'达成率', 
value:79,
itemStyle:{color :'rgba(0,153,255,0.8)'},
hoverAnimation: false, 
label : {
show : false,
position : 'center',
textStyle: {
fontFamily:'微软雅黑',
fontWeight: 'bolder',
color:'#B7E1FF',
fontSize:24
}
},
labelLine : {
show : false
}
},
{
name:'79%',
value:21,
itemStyle:{color: 'rgba(0,153,255,0.1)'},
hoverAnimation: false, 
label : {
show : false,
position : 'center',
padding:20,
textStyle: {
fontFamily:'微软雅黑',
fontSize: 24,
color:'#B7E1FF'
}
},
labelLine : {
show : false
}
}]
},
{
type : 'pie',
center : ['50%', '50%'],
radius : [95,100],
x: '0%',
hoverAnimation: false, 
data : [{
value:100,
itemStyle:{color :'rgba(0,153,255,0.3)'},
label : {show : false},
labelLine : {show : false}
}]
},
{
type : 'pie',
center : ['50%', '50%'],
radius : [69,70],
x: '0%',
hoverAnimation: false, 
data : [{
value:100,
itemStyle:{color :'rgba(0,153,255,0.3)'},
label : {show : false},
labelLine : {show : false}
}]
}]
};

//年仪表盘
y_gauge1 = echarts.init(document.getElementById('y_gauge1'));

        //刷新数据函数

        resresh();

        //开始定时刷新

        setInterval(resresh, 5*1000);

})；

6、编写resresh()函数，刷新数据；

function resresh()

{

    var maxg=Math.round(Math.random()*500)+400;

    //年进度条

    option_Progress.title.text ="计划生产";

    option_Progress.series[0].data[0].value = maxg;

    option_Progress.title.subtext =maxg+"台";

    option_Progress.series[0].data[1].value =0;//第一个进度条进度为100%，所以占位序列值为0

    y_gauge1.setOption(option_Progress);

}

下一篇：使用百度echarts制作可视化大屏——加入轮播的组合图