AI 助理
备案控制台
开发者社区 云计算 文章 正文

echarts图例分页legend

2023-11-09 955
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： echarts图例分页legend

方法：echarts的legend里设置type: 'scroll'，一定要有data字段，且data与series里的data要对应

滚动图例（垂直）

滚动图例（水平）

legend中type有以下两种：plain\scroll

  • plain：简单普通样式
  • scroll：可滚动翻页，当图例数量较多时使用
legend: {
        type: 'scroll',     //  分页类型
        right:'15%',
        data: (function (){
            var list = [];
            for (var i = 1; i <=2000; i++) {
                list.push(i + 2000 + '');
            }
            return list;
        })()
    },


关键词：
ECharts legend
ECharts图例
ECharts图例legend
讓丄帝愛伱
目录
相关文章
六卿
|
UED
使echarts图例legend只选中一个（selectedMode）
本文介绍了如何在ECharts图表中设置图例（legend）的选中模式为单选（'single'），以确保在有多个图例时，用户只能选择一个图例项进行展示，从而提升图表的可读性和用户体验。
六卿
1328 1
使echarts图例legend只选中一个（selectedMode）
蓝易云
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法，我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式，增强了图表的可读性和表现力。这种方法虽然略显间接，但不失为一种灵活的解决方案。
蓝易云
1739 2
杀死一只知更鸟debug
|
Web App开发 数据可视化 前端开发
Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式，包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码，以及对ECharts特性和优势的概述。
杀死一只知更鸟debug
1253 0
Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】
码喽的自我修养
|
计算机视觉
Echarts饼图，自定义饼图图例的排列方式, formatter使用语法
Echarts饼图，自定义饼图图例的排列方式, formatter使用语法
码喽的自我修养
1350 0
祈澈菇凉
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
祈澈菇凉
515 1
祈澈菇凉
|
JSON 数据格式
Echarts饼状图修改图例legend文字颜色和字体大小
Echarts饼状图修改图例legend文字颜色和字体大小
祈澈菇凉
3040 1
阿甘兄
58Echarts - 饼图（Pie with Scrollable Legend）
58Echarts - 饼图（Pie with Scrollable Legend）
阿甘兄
106 1
生产队的驴.
Echarts legend图例配置项 设置位置 显示隐藏
Echarts legend图例配置项 设置位置 显示隐藏
生产队的驴.
2101 0
邹荣乐
|
小程序 前端开发 JavaScript
微信小程序图表制作利器：ECharts组件的使用与技巧
微信小程序图表制作利器：ECharts组件的使用与技巧
邹荣乐
1091 1
theMuseCatcher
|
小程序 JavaScript
微信小程序使用echarts图表（ec-canvas）
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法，包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
theMuseCatcher
1779 1
微信小程序使用echarts图表（ec-canvas）

热门文章

最新文章

  • 1
    【微信小程序-原生开发】实用教程22 - 绘制图表（引入 echarts，含图表的懒加载-获取到数据后再渲染图表，多图表加载等技巧）
  • 2
    闲鱼无障碍是怎么在端侧实现的
  • 3
    全局服务器负载均衡（GSLB）简介
  • 4
    两步带你解决IDEA 插件下载安装慢、超时、不成功问题
  • 5
    KV存储的对比
  • 6
    【echarts】echarts中常用的参数总结
  • 7
    echarts柱状图圆角实现
  • 8
    Python绘图神器Matplotlib、Echarts、Pyecharts 和 Plotly ——可绘制各种图
  • 9
    ECharts 的配置语法：配置选项、数据格式、样式设置
  • 10
    echarts 修改图片（画布）大小
  • 1
    一文带你封装Vue3 Echarts
    885
  • 2
    前端echarts加标记点及标记线和提示框
    1122
  • 3
    vue中使用echarts绘制双Y轴图表时，刻度没有对齐的两种解决方法
    2889
  • 4
    vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果
    3366
  • 5
    vue中使用echarts实现省市地图绘制，根据数据显示省市天气图标及温度信息
    1371
  • 6
    Vue结合ECharts绘制省市地图：数据驱动区域颜色展示，支持省市下钻与经纬度打点功能
    1995
  • 7
    Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
    1740
  • 8
    微信小程序图表制作利器：ECharts组件的使用与技巧
    1091
  • 9
    vue-element-admin 综合开发五：引入 echarts，封装echarts 组件
    1131
  • 10
    echart:html中使用& echarts 的使用
    924

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云oss简介和如何对接使用