{site_name}

{site_name}

🌜 搜索

ECharts是一个基于JavaScript的开源可视化库,其中图例组件是用来展示不同系列或数据项的标记和名称的工具

前端 𝄐 0
echart图例的形状,echarts自定义图例颜色,echarts图例自定义,echarts图例位置设置,echart 自定义图例,echart图例位置
ECharts是一个基于JavaScript的开源可视化库,其中图例组件是用来展示不同系列或数据项的标记和名称的工具。可以通过配置来设置图例的类型和样式。

图例类型包括:
- plain:普通图例,每个系列对应一个图例项
- scroll:滚动图例,当图例项过多时可以使用该类型,支持水平和垂直方向滚动
- plain-vertial:竖直布局的普通图例
- scroll-vertical:竖直布局的滚动图例

以下是一个简单的示例代码,展示了如何在ECharts中配置图例类型为滚动图例:

javascript
option = {
legend: {
type: 'scroll',
orient: 'vertical', // 垂直方向滚动
data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10', '数据11', '数据12', '数据13', '数据14', '数据15', '数据16', '数据17', '数据18', '数据19', '数据20', '数据21', '数据22', '数据23', '数据24', '数据25', '数据26', '数据27', '数据28', '数据29', '数据30']
},
series: [
{
name: '数据名称',
type: 'bar',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300]
}
]
};


在这个示例中,type: 'scroll' 配置了图例类型为滚动图例,并可以通过 orient: 'vertical' 来选择垂直方向滚动。data 属性则是用来设置图例项的名称。