Echarts图表不均匀y刻线设置及气泡图点击操作
点击事件
气泡图点击需要在渲染数据后直接点击气泡，进行操作获取该气泡数据等
渲染图表
<div id="container" style="height: 100%"></div> 复制代码
var dom = document.getElementById("container"); var myChart = echarts.init(dom); var option; // 后续定义一下option myChart.off('click'); if (option && typeof option === 'object') { myChart.setOption(option); } 复制代码在渲染完成之后，直接添加点击事件
myChart.on('click',function(params){ console.log('params',params) }) 复制代码在有接口触发的情况下，点击某一个气泡，会触发与气泡数量相同的点击数量，导致重复点击，所以需要添加
myChart.off('click'); 复制代码添加的位置是在渲染图表之前添加。
不均匀坐标 y轴
这个是看了 @带甜味的盐@ 的 Echarts绘制不均匀数据轴（y）绘制完成的 直接可以查看该博主博文，但是自己也记录下
如图：
在这个位置我y轴三个气泡得到数据分别是 20000、90和7，在使用自动分配刻度的情况下，数据差异过大，会导致90和7的展示位置均处于0刻度附近，但是约20000的数据又不多，还得展示的时候要均匀，这就需要不均匀刻度了。
如上图，为y轴固定刻度，然后给其分档计算，具体挡位计算什么的看 这个
先看一组数据：
var data = [ [[20, 20000, 'Australia', 1990]], [[30, 90, 'Canada', 2015]], [[1400, 7, 'Canada', 2015]], ]; 复制代码
散点图数据格式如上，y轴自动获取数组内第二个数据
var data = [ [[20, 20000, 'Australia', 1990]], [[30, 90, 'Canada', 2015]], [[1400, 7, 'Canada', 2015]], ]; const dataInterval = [ 1, 10, 100, 1000, 10000]; const investAmount = data.map(item => { const amount = item[0][1]; // 寻找在数据间隔里小于amount的最大值 const min_v = Math.max(...dataInterval.filter(v => v <= amount)); // 寻找在数据间隔里大于amount的最小值 const max_v = Math.min(...dataInterval.filter(v => v > amount)); // 寻找 min_v 所在的下标 const index = dataInterval.findIndex(v => v === min_v); // 计算该amount在y轴上应该展示的位置 const y_value = parseFloat((((amount - min_v) / (max_v - min_v))+ index).toFixed(1)); item[0].splice(1,0,y_value) return item }) console.log('investAmount',investAmount.toString()); data = investAmount; 复制代码举个例子：
数据内的 90 ，在10 到100之间，然后计算一下它在这个之间的比例
(90-10) / (100-10) 这个可以计算出90在那个之间所占的比例，保留一位小数，为0.9，靠近100，在整个y轴上的位置是1.9 这个1是10在y轴上的位置
这个可以计算出它的位置，当然y轴的设置也非常重要（直接下方完整代码）
全部代码
test.html
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); // var app = {}; var option; var data = [ [[20, 20000, 'Australia', 1990]], [[30, 90, 'Canada', 2015]], [[1400, 7, 'Canada', 2015]], ]; const dataInterval = [ 1, 10, 100, 1000, 10000]; const investAmount = data.map(item => { const amount = item[0][1]; // 寻找在数据间隔里小于amount的最大值 const min_v = Math.max(...dataInterval.filter(v => v <= amount)); // 寻找在数据间隔里大于amount的最小值 const max_v = Math.min(...dataInterval.filter(v => v > amount)); // 寻找 min_v 所在的下标 const index = dataInterval.findIndex(v => v === min_v); // 计算该amount在y轴上应该展示的位置 const y_value = parseFloat((((amount - min_v) / (max_v - min_v))+ index).toFixed(1)); item[0].splice(1,0,y_value) return item }) console.log('investAmount',investAmount.toString()); data = investAmount; option = { legend: { right: '10%', top: '3%', data: ['1990', '2015','2021'] }, grid: { left: '10%', top: '10%' }, xAxis: { type: 'category', name: '数量', splitLine: { lineStyle: { type: 'dashed' } } }, yAxis: { // 这种设置方法，散点位置不准确，同一等级在一条线上，严重不符 // type:'category', // data: [ '1元', '10元', '100元', '1000元', '10000元'], type: 'value', min: 0, max: 4, splitNumber : 4, name: '金额', splitLine: { lineStyle: { type: 'dashed' } }, scale: true, axisTick: { show: true }, axisLine: { show: true }, axisLabel: { formatter: function(value, index){ let arr = [] if(value == 0){ arr.push('1元') }else if(value ==1){ arr.push('10元') }else if(value ==2){ arr.push('100元') }else if(value ==3){ arr.push('1000元') }else if(value ==4){ arr.push('10000元') } return arr } } }, tooltip:{ formatter:function(params){ var res = `<div>数量${params.data[0]}个</div>` + '\n'+ `<div>金额${params.data[1]}元</div>` return res } }, series: [ { name: '1990', data: data[0], type: 'scatter', symbolSize: 30, itemStyle: { shadowBlur: 10, shadowColor: 'rgba(120, 36, 50, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: 'rgb(251, 118, 123)' }, { offset: 1, color: 'rgb(204, 46, 72)' } ]) } }, { name: '2015', data: data[1], type: 'scatter', symbolSize: 30, itemStyle: { shadowBlur: 10, shadowColor: 'rgba(25, 100, 150, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: 'rgb(129, 227, 238)' }, { offset: 1, color: 'rgb(25, 183, 207)' } ]) } }, { name: '2021', data: data[2], type: 'scatter', symbolSize: 30, itemStyle: { shadowBlur: 10, shadowColor: 'rgba(25, 100, 150, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: 'rgb(229, 127, 238)' }, { offset: 1, color: 'rgb(225, 182, 207)' } ]) } } ] }; myChart.off('click'); if (option && typeof option === 'object') { myChart.setOption(option); } myChart.on('click',function(params){ console.log('params',params) // alert(`数量为${params.data[0]}个 金额为${params.data[2]}元`) }) </script> </body> </html> 复制代码实现的效果就是上方图片
完啦，就这么多！
作者：Crazy曼珠沙华
链接：https://juejin.cn/post/7024032829998628901