echarts 认知笔记

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 `<div> ... </div>`
        }
    }
},