0、echarts.setOption的核心认知
请注意,它是合并对象,而不是替换对象。
举个简单的例子,如果你第一次setOption时在series中配置了10个对象。
那么你下一次你意图使用只有两个对象的series来替换时,你并不能删除原有的10个,你只能替换series数组最前的两个。
明白了吧?如果不明白的话,可以使用myCharts.getOption()打印一下。
myCharts.setOption({ series: [ { ... }, { ... } ]})
但你甚至不能使用10个空对象来替换,为啥?因为是合并对象,而不是替换,如果你提供了空对象,通过合并(Object.assign了解一下)实际上还是原来的配置。
如果你真的想删除这10个,要么使用myCharts.clear() 。 这是可行的,但这可能又不是你想要的。
或者就是将这10个series循环替换掉核心属性如data,类似series.effectScatter这种配置如果没有data那就等于不存在。
1、ehcart legend的认知
legend 默认是根据所有series的name属性来生成的。但通常都是由我们自定义一个字符串数组来作为data属性的值。
注意:如果你想为自己的effectScatter使用该关联的话,你必须插入多次不同颜色的series.effectScatter配置才行。
legend: { orient: 'horizontal', selectedMode: 'multiple', bottom: '0', left: 'center', width: 740, itemWidth: 20, itemHeight: 20, textStyle: { color: '#000', fontSize: 16 }, data: ['治安消防', '交通管理', '市场管理', '民政救济', '文教卫体', '三农问题', '重大突发事件', '涉法事项', '涉军涉警', '无效来电', '行政效能投诉', '城市建设', '房产管理', '环境保护', '市容城管', '交通运输', '经济财贸', '其他事件'],}
2、tooltip 的认知
http://gallery.echartsjs.com/editor.html?c=xBkU4Ocw-7&tdsourcetag=s_pctim_aiomsg
虽然官网说series.effectScatter中可以配置 tooltip ,但我试了几遍还是没反应,只能在根配置中起到效果。
其实也一样可以达到目的,只需要在formatter中进行过滤,如果非effectScatter的就不return,就不会显示tooltip 了。
tooltip: { show: true, trigger:'item', alwaysShowContent:true, backgroundColor:'rgba(50,50,50,0.7)', hideDelay:100, triggerOn:'mousemove', enterable:true, padding: 15, formatter: function (params, ticket, callback) { // 必须是effectScatter才可以出现tooltip if (params.componentSubType === 'effectScatter') { return `...` } }},