1、先来个效果图,仔细看第二步, 其它的可以忽略:
2、想柱状图为0的数据不显示,以及悬浮时也不显示一共需要两步:
# 第一步控制柱状图为0的不生成柱状图。
# 大家应该知道option里面有一个series属性是来控制数据生成的,series是一个数组,数组里面存放的是对象;
# 假如这个对象是_series = {}, series属性的第0个
_serie = {
name: '', // 名称
type: 'bar', // 柱状图
label: labelOption, // labelOption 是一个对象
data:[] // 数据
}
# 注意可能柱状图有很多种,想找到normal对象,有的可能不是label,有的可能是
itemStyle: {
normal: {color: 'rgba(0,0,0,0.05)'}
},
# 有的可能都没有,没有的一般如果没数据就不会显示。
# 接下来进入labelOption对象,labelOption函数里面有一个normal对象,normal对象里面有一个formatter属性
# 我们只需要重写就行了。
var labelOption = {
normal: {
formatter: function(params) {
// 可以打印自己看一下, 其实params就是每根柱子的对象
console.info(params);
var html = '';
if (params.value > 0) {
// 千万不要html += '';
html = params.value + '次 ' + params.seriesName;
return html;
}
// 没有数据的返回'' 不是返回0
return html;
},
}
};
# 说白了就是找到normal然后重写值,重写之后,柱状图为0的就不会显示了。但是鼠标悬浮的时候还是会有,接下来我们再重写一下
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// 进行数据处理
formatter: function (params) {
var html = '';
if (params.length != 0) {
// 对应x轴的时间数据 也就是2019-01-01
// 可以自己打印一下console.info(params[0]);
var getName = params[0].name;
html += getName + '<br/>';
for (var i = 0; i < params.length; i++) {
// 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)
if (params[i].value != null && params[i].value != 0
&& params[i].value != '') {
// params[i].marker 需要加上,否则你鼠标悬浮时没有样式了
html += params[i].marker;
html += params[i].seriesName + ': ' + params[i].value + '次<br/>';
}
}
}
return html;
}
},
}
# 其实也是重写了option===>tooltip===>formatter:重写值,我发现这个不管是折线图和柱状图等,这个方法通用,鼠标悬浮时不显示。此时此刻,控制柱状图为0不显示,悬浮时为0不显示都已完成转换!友情链接:折线图数据为0的不显示!
3、个人代码,因为我的业务不一样,可能有的人看的很蒙,循环看蒙了,之前写了别的图形的,说看的很蒙,这次只把(重要)转换数据的地方给划出来了。下面仅供参考,就是上面效果图的代码,也是echars官网
https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation 这个柱状图形的动态数据生成的代码
$(document).ready(function () {
// 访问统计图形对象(totalEva 图形div 的ID)
var totalEva = echarts.init(document.getElementById('totalEva'), 'shine');
// 自动调节高度
window.onresize = function(){
// 自动调节图形大小
totalEva.resize();
}
// 类型 : 1 很满意 2 满意 3 一般; 评价类型名称
var evaluations = [], evaluationNames = [];
// 获取到后台传过来的数据
var data = null;
$.ajax({
url: '',
type: 'post',
async: false,
dataType: 'json',
success: function (res) {
if (res != null && res.length != 0) {
for (var i = 0; i < res.length; i++) {
// 评价类型名称
evaluationNames.push(res[i].evaluationName);
// 次数
evaluations.push(res[i].evaluation)
}
data = res;
}
}
})
// 去重复
evaluationNames = removeRepeatArrElement(evaluationNames);
// 类型 : 1 很满意 2 满意 3 一般;
evaluations = removeRepeatArrElement(evaluations);
var app = {};
option = null;
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: echarts.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
normal: {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
// formatter: '{c} {name|{a}}',
formatter: function(params) {
var html = '';
if (params.value > 0) {
html = params.value + '次 ' + params.seriesName;
return html;
}
return html;
},
fontSize: 16,
rich: {
name: {
// 柱形图上面的title颜色
textBorderColor: '#fff'
}
}
}
};
// 动态生成评价类型名称
var _seriesArr = [], _series = {};
for (var i = 0; i < evaluations.length; i++) {
var evaluation = evaluations[i];
var title = '';
if (evaluation == 1) {
title = '很满意';
} else if (evaluation == 2) {
title = '满意';
} else if (evaluation == 3) {
title = '一般';
}
_series = {
name: title,
type: 'bar', // 柱状图
label: labelOption,
data:[]
}
// 生成每种评价类型的对应的比列
// 评价 : 1 很满意 2 满意 3 一般
var _count = [];
for (var j = 0; j < evaluationNames.length; j++) {
var evaluationName = evaluationNames[j];
var count = ruleOut(evaluationName, evaluation);
_count.push(count);
}
// 把当前评价的数据放入_series对象、_seriesArr数组中
_series.data = _count;
_seriesArr[i] = _series;
}
// 通过评价类型,迭代此类型对应的评价 没有返回0
// evaluation 为评价类型 1 很满意 2 满意 3 一般
function ruleOut(evaluationName, evaluation) {
var lastData = 0;
for (var i = 0; i < data.length; i++) {
if (evaluation == data[i].evaluation && evaluationName == data[i].evaluationName) {
lastData = data[i].count;
}
}
return lastData;
}
option = {
title: {
text: '客户评价统计',
// subtext: '次',
left: 'left'
},
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// 进行数据处理
formatter: function (params) {
var html = '';
if (params.length != 0) {
// 对应x轴的时间数据 也就是2019-01-01
// 可以自己打印一下console.info(params[0]);
var getName = params[0].name;
html += getName + '<br/>';
for (var i = 0; i < params.length; i++) {
// 如果为0 为空的数据我们不要了
if (params[i].value != null && params[i].value != 0
&& params[i].value != '') {
// params[i].marker 需要加上,否则你鼠标悬浮时没有样式了
html += params[i].marker;
html += params[i].seriesName + ': ' + params[i].value + '次<br/>';
}
}
}
return html;
}
},
legend: {
data: ['很满意', '满意', '一般']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: evaluationNames
}
],
yAxis: [
{
type: 'value'
}
],
series: _seriesArr
};
if (option && typeof option === "object") {
totalEva.setOption(option, true);
}
})
// 数组去重复
function removeRepeatArrElement(arr){
var newArr = [];
var len = arr.length;
for(var i = 0; i < len; i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
return newArr;
}