echarts自定义tooltip、legend等

一. tooltip自定义

1. 由于指标数过多，一行展示一个指标会造成高度很高，呈现效果不佳，优化成一行显现两个指标，从而淘汰高度
关键代码如下：

1. formatter: function (params) {
2.       // 初始化一个空字符串来存储 tooltip 的内容
3.       var tooltipContent = '';
4.       // 对数据进行排序
5.       const data = params.sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
7.       // 创建一个数组来存储每行的内容
8.       var rowContents = [];
10.       // 遍历 params 数组
11.       data.forEach(function (item, index) {
12.         // 拼接 series 名称、类目值和数值
13.         const { marker, seriesName, value } = item;
14.         const formatValue = value || value === 0 ? `${value}%` : '';
16.         // 构建每个数据点的 HTML 内容
17.         const cellContent = `
18.           <div style="display:inline-block;width:50%;">
19.             <div style="display:flex;justify-content:space-between;line-height:24px;">
20.               <div>
21.                 ${marker}
22.                 <span>${seriesName}</span>
23.               </div>
24.               <div>${formatValue}</div>
25.             </div>
26.           </div>
27.         `;
29.         // 如果是偶数索引或者第一个元素，则开始新的一行
30.         if (index % 2 === 0) {
31.           rowContents.push(cellContent);
32.         } else {
33.           // 否则，将当前单元格附加到前一个单元格后面
34.           rowContents[rowContents.length - 1] += cellContent;
35.         }
36.       });
38.       // 将所有行的内容连接起来
39.       rowContents.forEach((row) => {
40.         tooltipContent += `<div style="width:200px;">${row}</div>`;
41.       });
43.       return `${params[0].name}<br/>${tooltipContent}`;
44.     },

复制代码

核心知识点：

• marker属性为笔墨左边的图标，展示的是html字符串格式；
  
• index % 2 === 0是为了使一行同时具备两个指标的数据
  为便于理解，可参考这个代码
  

1. const initData = [
2.   { id: 1, value: 11 },
3.   { id: 2, value: 12 },
4.   { id: 3, value: 13 },
5.   { id: 4, value: 14 },
6.   { id: 5, value: 15 },
7. ];
8. // rowContent
10. // 期望得到
11. const getData = () => {
12.   const resultData = [];
13.   initData.forEach((item, index) => {
14.     if (index % 2 === 0) {
15.       resultData.push(item.id + '');
16.     } else {
17.       resultData[resultData.length - 1] = resultData[resultData.length - 1] + item.id + '';
18.     }
19.   });
20.   return resultData;
21. };
23. const res = getData();
24. console.log(res, 'res99');

复制代码

2. 如何仅仅是想更改数据的展示格式，应该怎么处置惩罚？
比如在数据的底子上加%
可以利用valueFormatter（tooltip.valueFormatter）

1. const formatVal = (val) => {
2.   return val || val === 0 ? `${val}%` : '-';
3. };
4. valueFormatter: (val) => formatVal(val),

复制代码

3. 如何对展示数据举行排序？
可以用order属性（tooltip.order）

1. order: 'valueDesc',

复制代码

注意：上述例子为折线图场景，其它图形场景可能略有差别。
二. legend自定义

1. 假如legend排列想要自定义成
名称 百分比 数据 的格式，应该怎么处置惩罚？
关键代码如下：

1. // legend初始化赋值
2.   legend: {
3.     orient: 'horizontal',
4.     bottom: '10%',
5.     left: 'left',
6.     icon: 'circle',
7.     itemWidth: 10,
8.     itemHeight: 10,
9.     textStyle: {
10.       rich: {
11.         name: {
12.           fontSize: '10px',
13.           width: 45,
14.         },
15.         percentage: {
16.           color: '#303133',
17.           fontWeight: 700,
18.           width: 45,
19.         },
20.         value: {
21.           color: '#303133',
22.           fontWeight: 700,
23.         },
24.       },
25.     },
26.   },
27. // 设置legend formatter属性，进行自定义
28. echartLayoutVal.value.byFeePercent.option.legend.formatter = (params) => {
29.       const findItem = pieData.find((item) => item.name === params);
30.       const { value, percentage } = findItem;
31.       return `{name|${params}}{percentage|${percentage}%}{value|${value} 万元}`;
32.     };

复制代码

核心知识点：

• rich属性的利用
  

注意：上述例子为饼图场景，其它图形场景可能略有差别。
三. 如何保证饼图百分比总和为100

测试代码

1. const initData = [
2.   {
3.     id: null,
4.     wufyhs: 20747.5,
5.     datestr: null,
6.     tm: '汽运',
7.   },
8.   {
9.     id: null,
10.     wufyhs: 137.38,
11.     datestr: null,
12.     tm: '空运',
13.   },
14.   {
15.     id: null,
16.     wufyhs: 1705.48,
17.     datestr: null,
18.     tm: '船运',
19.   },
20.   {
21.     id: null,
22.     wufyhs: 3991.72,
23.     datestr: null,
24.     tm: '铁路',
25.   },
26. ];
28. const getPiePercentData = (initData, key) => {
29.   // 计算总和
30.   const total = initData.reduce((sum, item) => {
31.     return sum + item.wufyhs;
32.   }, 0);
33.   let sumPercentage = 0;
34.   const mapData = initData.map((item, index) => {
35.     const { wufyhs } = item;
36.     let percentage = (wufyhs / total) * 100;
37.     if (index !== initData.length - 1) {
38.       percentage = Math.round(percentage); // 四舍五入到两位小数
39.       sumPercentage += percentage;
40.     }
41.     return {
42.       value: wufyhs,
43.       name: item[key],
44.       percentage,
45.     };
46.   });
47.   // 设置最后一项的百分比
48.   mapData[initData.length - 1].percentage = 100 - sumPercentage;
49.   const sortData = mapData.sort((a, b) => b.percentage - a.percentage);
50.   return sortData;
51. };
52. const getData = getPiePercentData(initData, 'tm');
53. console.log(getData, 'getData');

复制代码

重要思路：将除末了一项前的百分比总和盘算出来，末了一项百分比值赋值为100减去除末了一项前的百分比总和
此种方法可能还不是最优，有更好的思路欢迎大家指教！
四. Promise.all和Promise.allSettled

业务场景：希望一次调用多个promise接口，但是promise接口之间希望不相互影响
测试代码

1. const promise1 = Promise.resolve(42);
2. const promise2 = Promise.reject('show error');
3. const promise3 = Promise.resolve('Hello World');
5. Promise.all([promise1.catch(() => null), promise2.catch(() => null), promise3.catch(() => null)])
6.   .then((values) => {
7.     console.log(values); // 不会执行，因为 promise2 被拒绝了
8.   })
9.   .catch((error) => {
10.     console.log(error); // 输出 'error'
11.   });
13. Promise.allSettled([promise1, promise2, promise3])
14.   .then((values) => {
15.     console.log(values, 'values'); // 不会执行，因为 promise2 被拒绝了
16.   })
17.   .catch((error) => {
18.     console.log(error, 'error'); // 输出 'error'
19.   });

复制代码

。
以上两种方法都可以达到效果
核心知识点：

• 利用 Promise.all 结合 catch：
  假如任何一个 Promise 对象被拒绝（rejected），Promise.all 将立即返回一个拒绝的 Promise，而且拒绝理由（reason）是第一个被拒绝的 Promise 的拒绝理由。
  

利用 Promise.all 结合 catch，这种方法通过在每个 promise 后添加 .catch(() => null) 来确保即使某个 promise 被拒绝，Promise.all 也不会被拒绝，而是会将该 promise 的效果视为 null（或其他你指定的默认值
2. Promise.allSettled
可以同时处置惩罚所有 promise 的效果，无论它们是成功还是失败。
不须要额外的错误处置惩罚，由于即使某个 promise 被拒绝，Promise.allSettled 仍旧会解析而不会进入 catch 块

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。