木子-前端-echarts开发小知识点

目录

1、怎样让echarts的label文字颜色呈现五彩斑斓色

​编辑

2、如何让图标加载默认只显示一个legend另外的默认不点击状态

3、饼状图数据过多导致指引线重叠，文字堆叠问

---

1、怎样让echarts的label文字颜色呈现五彩斑斓色

先上一张图表示什么五彩斑斓，如下图所示我们想要自定义echarts的文字，但是又想让它多点颜色区分，试过自定义formatter自定义里return span标签（尝试失败），百度了好一阵才找到

如上图所示我自定义的样式是不合格：xx个/总批次：xx个    合格率：xx%

上级要求，只有数字才能变色，其他参数不变色，唉。。。

请看下图，我再formatter内使用了{a|}{b|}{c|}

比如我们需要显示一个abcdefgh  其中ab是黑色  cd是绿色，其他是白色

那么格式就是：{a|ab}{b|cd}{c|efgh}        不一定必须按照abc这种顺序写，可以理解为一个变量标识而已

请看下面的rich属性声明每一个标识的颜色，然后就可以在页面完美展现出来了

label: {
                        normal: {
                            show: true,
                            position: [25,-15],
                            formatter: function (params,ticket,callback) {//seriesName
                                var res='{a|不合格:}{b|'+data3[numi]+'}{c|个/}{d|总批次:}' +
                                    '{e|'+(parseInt(data3[numi])+parseInt(data2[numi]))+'}{f|个   }{g|合格率：}{h|'+data4[numi]+'%}';
                                numi++;
                                return res;
                            },
                            textStyle: {
                                color: corA,
                                fontWeight:'normal',
                                fontSize: fsA
                            },
                            rich: {
                                a: {
                                    color: '#fff',
                                    fontSize: 14
                                },
                                b: {
                                    color: '#0EF821',
                                    fontSize: 14
                                },
                                c: {
                                    color: '#fff',
                                    fontSize: 14
                                },
                                d: {
                                    color: '#fff',
                                    fontSize: 14
                                },
                                e: {
                                    color: '#EFED0C',
                                    fontSize: 14
                                },
                                f: {
                                    color: '#fff',
                                    fontSize: 14
                                },
                                g: {
                                    color: '#fff',
                                    fontSize: 14
                                },
                                h: {
                                    color: '#0EF821',
                                    fontSize: 14
                                }
                            }
                        }
                    }

-------------------------------------------------------------------------------

2、如何让图标加载默认只显示一个legend另外的默认不点击状态

样式如下图所示，默认只显示不合格。

如下方代码只需添加selected属性即可

 legend: {
                    // data: ['合格', '无评价', '不合格'],
                    data: ['合格', '不合格'],
                    left: '30%',
                    textStyle: {
                        color: '#fff'
                    },selected:{
        　　　　        "合格":false  //图例为‘合格’的一项默认置灰
        　　       },
                },

-------------------------------------------------------------------------------

3、饼状图数据过多导致指引线重叠，文字堆叠问题

如下图所示

问题是出在labelLine堆叠问题上解决办法是

1、把labelLine的线长度加长（该方法是没有效果的，主要目的是为了配合第二步，设置不堆叠时，让线的样式好看点不要歪歪扭扭的）

2、设置内容不重叠：avoidLabelOverlap设置为true