博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echarts 认知笔记
阅读量:5936 次
发布时间:2019-06-19

本文共 1685 字,大约阅读时间需要 5 分钟。

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

 

转载于:https://www.cnblogs.com/CyLee/p/9823021.html

你可能感兴趣的文章
好用的CSS模块化打包工具CSS-COMBO
查看>>
python 中的字符和字符串
查看>>
C#Winform限制Textbox只能输入数字
查看>>
USACO 3.1.4 [Shaping Regions]
查看>>
EL表达式经典用法
查看>>
java.lang.NoClassDefFoundError: javax/mail/Authenticator
查看>>
联想集团涨超7% 杨元庆持股比例升至8.12%
查看>>
各省光伏十三五规划汇总:总规模将超130GW
查看>>
Apache Storm 官方文档 —— 常用模式
查看>>
聊聊JVM的年轻代
查看>>
lvm逻辑卷管理
查看>>
VS2010不能断点/下断的问题
查看>>
[Android]权限处理
查看>>
Spark bind on port 0. Attempting port 1 问题解决
查看>>
大端、小端字节序
查看>>
兼容所有浏览器的复制到剪切板功能,悬浮层不能复制问题解决
查看>>
day 20 第一阶段考试总结
查看>>
Javascript实例:Select的OnChange()事件
查看>>
Linux SAMBA服务器重启后自动挂载失效
查看>>
java 编译时的初始化顺序
查看>>