首页ECharts 图表中 legend 的宽度和文本溢出怎么用css实现例子

ECharts 图表中 legend 的宽度和文本溢出怎么用css实现例子

时间: 2024-03-21 21:41:58 浏览: 136

以下是一个完整的 ECharts 图表示例，展示如何使用 CSS 控制图表中 legend 的宽度和文本溢出： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 图表示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> <style> /* 设置 legend 容器宽度 */ .echarts-legend-container { width: 200px; } /* 设置 legend 文本溢出样式 */ .echarts-legend-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 基于准备好的dom，初始化echarts实例 let myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 let option = { legend: { data: ['数据一', '数据二', '数据三', '数据四', '数据五'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', data: [ {value: 335, name: '数据一'}, {value: 310, name: '数据二'}, {value: 234, name: '数据三'}, {value: 135, name: '数据四'}, {value: 1548, name: '数据五'} ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在上面的代码中，我们通过设置 CSS 样式来控制了 legend 容器宽度和文本溢出样式。这样就可以确保 legend 显示时不会出现文本溢出的问题，同时也保证了 legend 的宽度不会超出预期。

阅读全文