度娘找了一个小时,没有一个解决方案,都是一些过时的方法。
ECharts版本:3.6.2
方法:
配置项:series.barGap
说明:
柱间距离,可设固定值(如 20)或者百分比(如 ‘30%’,表示柱子宽度的 30%)。
如果想要两个系列的柱子重叠,可以设置 barGap 为 ‘-100%’。这在用柱子做背景的时候有用。
在同一坐标系上,此属性会被多个 ‘bar’ 系列共享。此属性应设置于此坐标系中最后一个 ‘bar’ 系列上才会生效,并且是对此坐标系中所有 ‘bar’ 系列生效。
思路来源:http://gallery.echartsjs.com/editor.html?c=xBkSx1lSfW
结果展示:
解决方案:
<script type="text/javascript">
var UName = ['张晨威','李锋锐','谢海青'];
var WeiNum = [41,42,35];
var WuNum = [77,74,112];
var DaiNum = [2,1,3];
var CNum = [0,3,0];
var BNum = [0,0,0];
var ANum = [0,0,0];
var JiNum = [0,0,0];
var totalNum =[120,120,150];
console.log(totalNum);
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['未接','无意向','待定','意向C','意向B','意向A']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: UName
},
yAxis: {
type: 'value'
},
series: [
{
name: '总和',
type: 'bar',
barGap: '-100%',
label: {
normal: {
textStyle: {
color: '#682d19'
},
position: 'left',
show: false,
formatter: '{b}'
}
},
itemStyle: {
normal: {
color: '#E5F9FB',
borderWidth: 2,
borderColor: '#1FBCD2'
}
},
data:totalNum
},
{
name: '无意向',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: WuNum
},
{
name: '未接',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: WeiNum
},
{
name: '待定',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: DaiNum
},
{
name: '意向C',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: CNum
},
{
name: '意向B',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: BNum
},
{
name: '意向A',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: ANum
},
{
name: '即将成交',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: JiNum
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>