需求

需參照設(shè)計(jì)圖畫出對(duì)應(yīng)圖表

主要代碼

/**** 數(shù)據(jù) ****/
this.dataList = [...Array(8).keys()].map((item) => {return {ywlxmc: '業(yè)務(wù)類型' + (item + 1),sl: item > 4 ? 50 : 70}
})/**** 氣泡樣式 ****/
const styleList = [{offset: [56, 48],color: ['#4691F6', '#A98BFF']},{offset: [35, 80],color: ['#4691F6', '#6EFFF6']},{offset: [20, 43],color: ['#A98BFF', '#FBA9ED']},{offset: [83, 30],color: ['#FF6B23', '#FF9D2A']},{offset: [36, 20],color: ['#16E2FF', '#3EFFB4']},{offset: [64, 10],color: ['#A98BFF', '#FBA9ED']},{offset: [75, 75],color: ['#FF482A', '#F2842B']},{offset: [88, 62],color: ['#4691F6', '#6EFFF6']}
]/**** 配置項(xiàng) ****/
options = {title: {show: isArray && !this.dataList.length,text: '暫無(wú)數(shù)據(jù)',left: 'center',top: 'center',textStyle: {color: this[this.theme + 'EchartsNoDataColor']}},tooltip: {trigger: 'item',formatter: ''},grid: {show: false,top: 10,bottom: 10},xAxis: [{gridIndex: 0,type: 'value',show: false,min: 0,max: 100,nameLocation: 'middle',nameGap: 5}],yAxis: [{gridIndex: 0,min: 0,show: false,max: 100,nameLocation: 'middle',nameGap: 30}],series: [{type: 'scatter',symbol: 'circle',symbolSize: 120,label: {normal: {show: true,formatter: '',color: '#fff',textStyle: {fontSize: '20'}}},itemStyle: {normal: {color: '#00acea'}},data: this.dataList.map((dataItem, index) => {var itemToStyle = styleList[index] // 當(dāng)前氣泡對(duì)應(yīng)樣式return {name: `${dataItem.ywlxmc}\n${dataItem.sl}`, // 要展示的文字value: itemToStyle.offset, // 氣泡位置symbolSize: dataItem.sl, // 氣泡大小label: {textStyle: {fontSize: 11, // 展示文字大小lineHeight: 14, // 展示文字行高color: this.theme === 'light' ? '#0C2753' : '#fff' // 展示文字顏色}},itemStyle: {normal: {// 氣泡背景漸變顏色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: itemToStyle.color[0] // 0% 處的顏色},{offset: 1,color: itemToStyle.color[1] // 100% 處的顏色}],global: false // 缺省為 false},opacity: 1, // 氣泡透明度shadowColor: itemToStyle.color[0], // 氣泡陰影顏色shadowBlur: 10 // 氣泡陰影范圍}}}})}]
}

效果展示

注

• 參考改造：https://www.makeapie.cn/echarts_content/xHymMERhjf.html

• 類似散點(diǎn)圖制作氣泡：

  • https://www.makeapie.cn/echarts_content/xNA8-Rj_wd.html

  • https://www.makeapie.cn/echarts_content/xPQyAxdcyG.html