先看echarts官网例子，可以看到第一张图是箱线图，点是离散的，第三张图是colorBy分组后的箱线图，拿到需求的时候，我就想是不是都有。我只是复用了官网的例子就结束了，但是实际效果并不理想，因为echarts同样的x值，如果对应三个seriesboxes，左右排列。如果三个系列对应的散点排列在同一条竖线上，简单看效果根本不对应！我明白为什么官网的例子要么只有离散点，要么只有colorBy分组，但是没有两者的例子。..卷起袖子开始寻找解决方案。首先，我发现散点图可以这样对数据进行分组，形式为[[x轴的值，y对应的值]，[x轴的值，y对应的值y],[x轴的值,y对应的值],...]如果boxPlot也可以这样写，不就解决了这个问题，大胆的挥一挥试试。果然画不出来却也脑洞大开。是否可以？用series把所有的箱线图都放上去，用itemStyle实现颜色区分。（颜色分组要和系列的颜色颜色分组一致。）试试看。代码格式和渲染效果如下。能把刚才的散点加起来吗？顶上，试了一下，好像是，但是x轴不是x1对应两种颜色。然后像这样进行改造。对于x1对应的不同颜色，在x轴上放一个fakeid，然后根据fakeid合并x1和x2等之前名字的选项如下：option={xAxis:{type:'category',data:['x1_fakerId:1','x1_fakerId:2','x2_fakerId:1','x3_fakerId:1','x3_fakerId:2','x4_fakerId:1','x4_fakerId:2']},图例：{show:true,data:['color1','color2']},yAxis:{type:'value'},series:[{data:[{value:[1.1,1.2,1.3,1.4,1.5],itemStyle:{borderColor:'#5470c6'}},{值:[3.1,3.2,3.3,3.4,3.5],itemStyle:{borderColor:'#91cc75'}},{值:[2.1,2.2,2.3,2.4,2.5],itemStyle:{borderColor:'#5470c6'}},{值:[5.1,5.2,5.3,5.4,5.5],itemStyle:{borderColor:'#5470c6'}},{值:[0.6,2,3,4,5],itemStyle:{borderColor:'#91cc75'}},{值:[2.4,2.8,3.5,4.6,4.9],itemStyle:{borderColor:'#5470c6'}},{值:[1.5,2,2.3,3.6,5.7],itemStyle:{borderColor:'#91cc75'}}],type:'boxplot',name:'boxplot'},{数据:[['x1_fakerId：1',1],['x1_fakerId：1]',2],['x2_fakerId:1',3],['x2_fakerId:1',4],['x3_fakerId:1',8],['x3_fakerId:1',8.9],['x3_fakerId:1',8.4],['x4_fakerId:1',7.2]],itemStyle:{颜色:'#5470c6'},类型:'scatter',名称:'color1'},{数据:[['x1_fakerId:2',5.5],['x3_fakerId:2',6.7],['x3_fakerId:2',6],['x3_fakerId:2',7.6],['x4_fakerId:2',8.7],['x4_fakerId:2',5.8],['x4_fakerId:2',1.3]],itemStyle:{color:'#91cc75'},type:'scatter',name:'color2'}]};x轴的组合显示，参考之前多层x轴的实现https://segmentfault.com/a/11...最后对于lenged的变化，需要监控更改图例并更新boxPlot对应的seriesmyChart.on('legendselectchanged',(params:any)=>{//console.log(params,'params');constcurrentOption=myChart.getOption();letcurrentSeries:KeyValue[]=currentOption.seriesasKeyValue[];if(currentSeries.length<1)return;constcurrentSeriesBoxPlot=currentSeries[0];constnewboxPloSeriesData:KeyValue[]=[];//根据对应的newboxPlot处理个人组织系列的数据结构points.map((item:KeyValue)=>{constboxData=item.boxData;constynName:string=Object.keys(boxData)[0];if(!isEmpty(params.selected))//如果选择了对应的yName，则处理对应boxPlot的填充框的部分newboxPloSeriesData.push({value:params.selected[ynName]===true?Object.值（boxData）[0]：[]，itemStyle：{borderColor：ERCHARTSCOLORS[yn.indexOf（ynName）%9]，}，}）；});constnewSeriesBoxPlot=Object.assign({},currentSeriesBoxPlot,{data:newboxPloSeriesData});currentSeries[0]=newSeriesBoxPlot;constnewOption=Object.assign({},currentOption,{series:currentSeries});myChart.setOption(newOption);});最终实现效果：PS：这个方案有个问题，因为legend的选中状态没有保存，每次缩放后，所有series都会重置为所有boxplots，有待优化PS2：Echarts社区还有一个解决方案：https://www.makeapie.cn/echar...使用pictorialBar类型绘制的离散点，但是barGap的设置感觉会有坑，偶尔离散点不对齐框的中心.如果colorBy的数量少的时候，效果不大
