图表特点及问题:
1.需要是两种类型的交叉,横轴和纵轴都是字符型,在echarts官网上查到的散点图,横纵轴都是数值类型,结果配成字符之后,无法出现交叉点,变成区域。最后的办法是,将横纵轴的值换成数值型,再通过formatter实现展示为原本的字符
2.交叉点上需要展示数量,并根据数量大小展示气泡大小。利用symbolSize实现
配置如下:
var data = [
{tech: '技术1', business: '业务5', num: 5},
{tech: '技术1', business: '业务2', num: 15},
{tech: '技术1', business: '业务1', num: 10},
{tech: '技术11', business: '业务6', num: 10},
{tech: '技术3', business: '业务2', num: 8},
{tech: '技术2', business: '业务6', num: 8},
{tech: '技术4', business: '业务2', num: 10},
{tech: '技术4', business: '业务4', num: 15},
{tech: '技术3', business: '业务8', num: 11},
{tech: '技术10', business: '业务6', num: 12},
{tech: '技术3', business: '业务6', num: 13},
{tech: '技术6', business: '业务6', num: 14},
{tech: '技术6', business: '业务5', num: 15},
{tech: '技术6', business: '业务6', num: 16},
{tech: '技术7', business: '业务5', num: 17},
{tech: '技术7', business: '业务8', num: 6}
];
var xData = ['技术1','技术2','技术3','技术4',
'技术5','技术6','技术7','技术8',
'技术9','技术10','技术11'];
var yData = ['','业务1', '业务2', '业务3','业务4',
'业务5','业务6','业务7','业务8']
var option = {
backgroundColor: 'rgb(245,247,251)',
padding: 10,
xAxis: {
name: '技术方向',
boundaryGap: ['10%', '0%'],
nameTextStyle: {
fontSize: 15,
color: '#666',
verticalAlign: 'bottom',
fontWeight: 'bold'
},
scale: true,
axisTick: {
show: false
},
axisLabel: {
formatter: function(params){
return xData[params];
}
},
interval: 1,
splitNumber: xData.length,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#e3e3e3'
}
}
},
color: ['rgb(228, 164, 52)'],
yAxis: {
name: '业务方向',
boundaryGap: ['5%', '0%'],
nameTextStyle: {
align: 'right',
fontSize: 15,
color: '#666',
fontWeight: 'bold'
},
interval: 1,
splitNumber: yData.length,
scale: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
formatter: function(idx){
console.log(idx); //
return yData[idx];
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#e3e3e3'
}
}
},
series: data.map((d, i)=>{
return {
type: 'scatter',
label: {
show: true,
formatter: function(params){
return data[params.seriesIndex].num;
}
},
symbolSize: d.num*2,
data: [
[
xData.indexOf(d.tech),
yData.indexOf(d.business)
]
]
}
})
};
效果如下: