/**
* 统计条形图(横向滚动的情况)
* @param id
* @param data [{key:val,key:val...}]
* @param color ['rgba(12,12,12,0)','rgba(12,12,12,1)','rgba(12,12,12,0.1)'] 开始颜色,结束颜色,背景色
*/
function activityBarChartScroll(id,data,color){
if (!id) {
return;
}
var total = 0;
data = data || {};
var xData = [];
var yData = [];
var bData = [];
for (var k in data) {
total += parseInt(data[k].value)
}
if(total == 0){
total = 1;
}
for (var k in data) {
xData.push(data[k].name);
yData.push(data[k].value);
bData.push(total);
}
option = {
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '5%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
},
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
interval: 0,
//设置字数限制
formatter: function(value) {
if (value.length > 8) {
return value.substring(0, 8) + "...";
} else {
return value;
}
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: xData
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '12'
},
},
data:yData
}],
series: [{
name: '数量',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: color[0]
}, {
offset: 1,
color: color[1]
}]),
},
},
barWidth: 16,
data:yData
},
{
name: '总数',
type: 'bar',
barWidth: 16,
barGap: '-100%',
data: bData,
itemStyle: {
normal: {
color: color[2],
barBorderRadius: 30,
}
},
},
]
};
var myChart = echarts.init(document.getElementById(id));
myChart.setOption(option);
$(window).resize(function() {
myChart.resize();
})
}
关键代码块:
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
interval: 0,
//设置字数限制
formatter: function(value) {
if (value.length > 8) {
return value.substring(0, 8) + "...";
} else {
return value;
}
}
},
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/7cd009bf3ebb69bf2c84f7f0ac7a41b2.png)