option = {
tooltip: {
trigger: 'axis',
textStyle: {
color: '#fff'
},
axisPointer: {
type: 'shadow',
borderColor: 'rgba(124,128,244, .5)',
},
position: 'inside',
formatter: (params) => {
return `${params[0].axisValueLabel}-${params[0].seriesName}:${params[0].data[2]} <br /> ${params[1].axisValueLabel}-${params[1].seriesName}:${params[1].data[2]}`
}
},
grid: {
show: true,
top: 30,
left: '8%',
right: '3%',
bottom: 40,
borderColor: "#fff"
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: {
color: '#215AFF'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#103095'],
width: 1,
type: 'dashed'
}
}
},
yAxis: {
type: 'category',
splitLine: {
show: true,
lineStyle: {
color: ['#103095'],
width: 1,
type: 'dashed'
}
},
nameTextStyle: {
color: '#fff'
},
axisLine: {
lineStyle: {
color: "#215AFF"
}
},
data: ['北京', '上海', '广州', '深圳', '杭州', '天津'],
scale: true
},
series: [{
name: '数据2',
// 先X,后y
data: [
[0, 0, 22],
[1, 1, 73],
[2, 2, 83],
[3, 3, 65],
[4, 2, 89],
[5, 4, 166],
[6, 5, 244],
[7, 5, 121],
[8, 1, 232],
[9, 3, 267],
[10, 5, 289],
[11, 2, 266],
],
type: 'scatter',
symbolSize: function(data) {
return Math.sqrt(data[2])*3;
},
emphasis: {
label: {
show: false,
formatter: function(param) {
return param.data[2];
},
position: 'top'
}
},
itemStyle: {
shadowBlur: 15,
shadowColor: 'rgba(0,0,0, 0.5)',
shadowOffsetY: 5,
color: '#ff9f7f',
}
},
{
name: '数据1',
data: [
[0, 2, 222],
[1, 3, 223],
[2, 4, 223],
[3, 2, 155],
[4, 5, 125],
[5, 3, 267],
[6, 1, 288],
[7, 2, 213],
[8, 3, 244],
[9, 5, 166],
[10, 2, 223],
[11, 5, 188],
],
type: 'scatter',
symbolSize: function(data) {
return Math.sqrt(data[2])*3;
},
emphasis: {
label: {
show: false,
formatter: function(param) {
return param.data[2];
},
position: 'top'
}
},
itemStyle: {
shadowBlur: 15,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: '#8379ea',
}
}
]
}
点击运行 》