标签：params1 return res 图例 let params data echarts icon

今天的开发中，遇到问题如下：

下图是UI需要的效果图

一开始在lengend中配置如下（主要是formatter中的内容）

legend: [
          {
            orient: "vertical",
            right: "1%", //所处位置
            top: "0%",
            textStyle: {
              color: "#fff",
              fontSize: 14,
              lineHeight: 18
            },
            icon: "circle",
            itemGap: 10,
            itemWidth: 10,
            itemHeight: 14,
            formatter: params => {
              for (let a = 0; a < this.data.length; a++) {
                // this.data  这个数据中有名称和次数
                if (this.data[a].name === params) {
                  //两个名称进行对比，取出对应的次数
                  return params + "\n" + this.data[a].value; //然后return你需要的legend格式即可
                }
              }
            }
          }
        ],

效果如下：

发现icon并没有和首行文字对齐
于是借鉴百度经验上一位老哥的回答，修改lengend中formatter配置

formatter: params => {
              for (let a = 0; a < this.data.length; a++) {
                // this.data  这个数据中有名称和次数
                if (this.data[a].name === params) {
                  //两个名称进行对比，取出对应的次数
                  let params1 = params + "\n" + this.data[a].value; //然后return你需要的legend格式即可
                  console.log(params1);
                  let tmp = params1.split("\n");
                  let res = "" + params1;
                  for (let i in tmp) {
                    res = res.replace(tmp[i], "");
                  }
                  return res + params1;
                }
              }
            }

效果如下图所示，完美解决

标签：params1,return,res,图例,let,params,data,echarts,icon
来源： https://www.cnblogs.com/hongxinc/p/echarts-icon.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。