对于图表，首先需要进行echarts的初步渲染，关键代码如：
var myChart = echarts.init(document.getElementById('main'));
其次，需要在对option配置设定之后，需要对其渲染到myChart中，关键代码如：
myChart.setOption(option);
在同一个option标签中，进行多个不同图表的渲染。
根据后台数据，可以动态设置显示图表，该功能主要根据各个模块的show来进行控制。在饼图的无数据展示的时候，来对其进行隐藏的时候，则不能使用show，需要使用stillShowZeroSum。
option = {//简单的 柱状图+饼图 展示
//设置柱状图位置，x：与左侧边界距离；y：与上侧边界距离；width：柱状图宽度；height：柱状图高度
grid: [
{x: '5%', y: '5%', width: '40%', height: '16%',},
{x: '60%', y: '5%', width: '40%', height: '16%'},
{x: '5%', y: '35%', width: '40%', height: '16%'},
{x: '60%', y: '35%', width: '40%', height: '16%'},
],
//图表标题设置，其内容以及位置
title:
[{
text: '数据完整率',
left:'15%',
},
{
text: '数据有效率',
left:'70%',
},{
text: '在线仪器运转率',
left:'15%',
top:'30%',
},{
text: '数据超标率',
left:'70%',
top:'30%',
},{
text: '报警类型分布图',
left:'17%',
top:'60%',
},{
text: '报警响应分布图',
left:'67%',
top:'60%',
},],
//X轴
xAxis: [
{
gridIndex: 0, //定义index
type: 'category',
data: ['1','2','3','4','5'],
},
{
gridIndex: 1,
type: 'category',
data: ['1','2','3','4','10'],
//data: msg.intergrity_xAxis[0].data,
},
{
gridIndex: 2,
type: 'category',
data: ['1','2','3','4','5'],
//data: msg.intergrity_xAxis[0].data,
},
{
gridIndex: 3,
type: 'category',
data: ['1','2','3','4','5'],
//data: msg.intergrity_xAxis[0].data,
},
],
yAxis: [ //y轴
{gridIndex: 0 ,},//定义y轴index
{gridIndex: 1 ,},
{gridIndex: 2 ,},
{gridIndex: 3 ,},
],
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
series: [
{
type: 'bar',
xAxisIndex: 0,//使用x轴的index-0，y轴的index-0
yAxisIndex: 0,
show:false,//是否进行展示
data: ['1','2','3','4','5'],
},
{
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: ['1','2','3','4','5'],
//data: msg.intergrity_series[0].data,
},
{
type: 'bar',
xAxisIndex: 2,
yAxisIndex: 2,
data: ['1','2','3','4','10'],
//data: msg.intergrity_series[0].data,
},
{
type: 'bar',
//X与Y使用的INDEX
xAxisIndex: 3,
yAxisIndex: 3,
data: ['1','2','3','4','5'],
//data: msg.intergrity_series[0].data,
},
{//饼图
name: 'NB-ZZ', //图形名称
type: 'pie', // 图形类型
//饼图半径
radius : '25%',
center: ['25%', '85%'],
//在数据为0的时候不显示扇区
stillShowZeroSum:false,
data:[
{value:0, name:'直接访问'},
{value:0, name:'邮件营销'},
{value:0, name:'联盟广告'},
{value:0, name:'视频广告'},
{value:0, name:'搜索引擎'}
],
}, {
name: 'NB-CC',
type: 'pie',
radius : '25%',
center: ['75%', '85%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
}
]
};