这个问题的原因是由于 `grid` 属性中的 `left` 和 `right` 值设置不当，导致图表在缩放时无法完整显示。您可以尝试调整 `left` 和 `right` 的值，使得图表能够在缩放时完整地显示出来。
另外，您也可以使用 `dataZoom` 组件来实现缩放功能，这样可以更加灵活地控制图表的显示范围。具体实现方法可以参考 ECharts 官方文档：https://echarts.apache.org/zh/option.html#dataZoom。
以下是一个可能的解决方案：
```javascript
let option = {
tooltip: {
show: true
},
legend: {
show: false,
},
grid: {
top: 5,
bottom: 0,
left: 60, // 调整 left 的值
right: 20, // 调整 right 的值
},
xAxis: {
show: false,
type: 'value',
},
yAxis: [
{
type: 'category',
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: true,
margin: 30,
},
},
data: dataList.map((item) => item.name),
axisLabel: {
margin: 40,
fontSize: 14,
align: 'left',
color: '#31373D',
rich: {
a1: {
color: 'rgba(0, 0, 0, 0)',
backgroundColor: {
image: img1,
},
width: 30,
height: 30,
align: 'center',
borderRadius: 2,
},
a2: {
color: 'rgba(0, 0, 0, 0)',
backgroundColor: {
image: img2,
},
width: 30,
height: 30,
align: 'center',
borderRadius: 2,
},
a3: {
AI助手
资讯
常用工具
网站模板