echarts 日常问题解决

---

饼状图色块之间加一个间距

padAngle: 1,

---

echarts图加点击事件(适用柱状图)

               // 给饼图添加点击事件
                myChart.off('click'); // 先解绑防止重复绑定
                myChart.on('click', (params) => {
                    // 只有点击到 扇形色块 才触发
                    if (params.componentType === 'series' && params.seriesType === 'pie') {
                        // 在这里写你的业务逻辑
                       console.log(params.data)
                    }
                });

---

X轴文字超长处理

1.超长截断

将echarts 数据提前处理

           // 超过八位截取前八位  然后加... 
           getEightStr(str) {
                // 容错：防止传入非字符串
                const s = String(str);
                return s.length > 8 ? s.slice(0, 8) + '...' : s;
            },

          const handelList = List.map(item => this.getEightStr(item.name));

2.文字倾斜

     xAxis: {
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12,
                            rotate: 20,  // 👈 就是这一行！负数=向右斜，正数=向左斜
                            interval: 0   // 强制显示所有标签，不隐藏
                        }
                    },

---