由于公司制定了开发BI数据系统的任务，而前端方面选用了echarts进行了报表的展示，下面我将使用过程中的心得与遇到的坑表述一下。
Echarts版本为echarts3.0；
1553224855(1).jpg
1553225039(1).jpg
图形中包含柱状图，热力图，饼图，折线图等。
不得不说echarts的功能还是很强大的，
下面我将第一幅图的代码贴上来。
this.parseOption = function (data) {
var chartConfig = data.chartConfig;
var casted_values = data.series;
var title = ""
if(casted_values[0]=="cimpletesum"){
casted_values[0] ="计划数";
casted_values[1] ="完成数";
title =""
}else{
casted_values[0] ="月总预算";
casted_values[1] ="月实际花费";
title =""
}
var aggregate_data = data.data;
var tunningOpt = chartConfig.option;
var graphic =[];
var yearMonth = [];
var legend = {};
if(data.data ==null || data.data.length == 0 ){
title ="";
graphic = [
{
type: 'image',
id: 'logo',
left: 'center',
top: '20px',
z: -10,
bounding: 'raw',
origin: [75, 75],
style: {
image: '../imgs/nomore.png',
width: 200,
height: 120,
opacity: 0.4
}
},
{
type: 'text',
z: 100,
left: 'center',
top: '160px',
style: {
fill: '#ccc',
text: [
'暂 无 数 据 哟 ~^o^~'
].join('\n'),
font: '14px Microsoft YaHei'
}
}
]
}else{
yearMonth = [data.keys[0][0].substr(0, 4) + '-'+data.keys[0][0].substr(5, 2)];
legend = {
data: casted_values,
x: 'left',
y: 'bottom'
}
}
var echartOption = {
title : {
text:title,
textStyle:{
fontStyle:'normal',
fontWeight:'normal',
fontSize:16
},
},
legend: legend,
grid: {
left: '3%',
right: '12%',
// bottom: '3%',
// height:'80%',
},
graphic:graphic,
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01],
show: false,
}
],
yAxis : [
{
type : 'category',
data : yearMonth,
show: false,
}
],
series : [
{
name:casted_values[0],
type:'bar',
barGap:'-65%',
barWidth: 60,
label: {
normal: {
show: true,
position:'insideTopRight',
textStyle:{
color: 'white',
fontSize:'14',
}
}
},
itemStyle:{
normal: {
color : '#319ee0',
}
},
data:_.map(aggregate_data[1])
},
{
name:casted_values[1],
type:'bar',
barWidth: 40,
label: {
normal: {
show: true,
position:'insideRight',
formatter:function(param){
if(title =="费用总览"){
if(Number(param.value)>Number(aggregate_data[1])){
return param.value+" "+"超额："+(Number(param.value)-Number(aggregate_data[1])).toFixed(2);
}else{
return param.value;
}
}
return param.value+"("+((param.value/aggregate_data[1])*100).toFixed(2) + '%'+")"
},
textStyle:{
color: 'white',
fontSize:'14',
}
}
},
itemStyle:{
normal: {
color : '#52bffa'
},
},
z: 5,
data:_.map(aggregate_data[0])
},
]
};
其中echartOption这个对象就是echarts的核心对象，echarts通过该对象中的属性对图形进行处理。
其中主要属性有
title 图标标题
legend 图标内容标识
grid 图标布局
graphic 图标的图片填充
xAxis 水平数据属性
yAxis 垂直数据属性
series 水平与垂直属性对应的数据
其中graphic 在我的开发中起到了至关重要的作用，主要体现在，当图标数据为空时，echarts3会默认在页面上展示位空，是的，啥都没有，贼丑，当然，你也可以通过div替换页面内容，但是在我的项目中，是没办法替换div的，网上查找很长时间，发现存在一个noDataLoadingOption属性可以自动在没数据的时候填充页面，然鹅，当我把这个属性放入的时候发现，根本没有任何改变，还是空白，结果发现原来echarts3中取消了这个属性，咋办呢，烦躁，痛苦，终于，找到了这个属性graphic 解决了我的问题。附上我的无数据图。
image.png
完美解决无数据问题。graphic 的使用方式见上图代码。
百度的echarts在没接触之前，还是觉得使用起来会比较复杂，但是使用后，发现其还是很简单的，底层是canvas,灵活使用属性配置就好了。