echarts属性：图例legend、底部缩放条dataZoom

最新推荐文章于 2024-01-05 11:16:49 发布

蚕豆ya

最新推荐文章于 2024-01-05 11:16:49 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echart 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45684708/article/details/121292232

echart 专栏收录该内容

6 篇文章

订阅专栏

本文主要介绍了Echarts中两个重要的组件：图例（legend）和底部缩放条（dataZoom）。图例用于控制图表中各个系列的显示与隐藏，而底部缩放条则提供了一种交互方式，允许用户对数据进行区域缩放，以查看不同范围的数据细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、图例

在这里插入图片描述

  // 图例配置
  legend: {
    data: [
      '出货量', '进货量', '售出量', '测试一', '测试二', '测试三', '测试四', '测试五', '测试六', '测试七',
      '测试八', '测试九', '测试十', '复试一', '复试二', '复试三', '复试四', '复试五', '复试六', '复试七',
      '复试八', '复试九', '复试十', '补位一', '补位二', '补位三', '补位四', '补位五', '补位六', '补位七'
    ],
    selected: {
	  //true是指显示在图表上，false则为不显示
      '出货量': true,
      '进货量': false,
      '售出量': true,
      '测试一': false,
      '测试二': false,
      '测试三': false,
      '测试四': false,
      '测试五': true,
      '测试六': false,
      '测试七': false,
      '测试八': false,
      '测试九': false,
      '测试十': false,
      '复试一': false,
      '复试二': true,
      '复试三': false,
      '复试四': false,
      '复试五': false,
      '复试六': false,
      '复试七': false,
      '复试八': false,
      '复试九': false,
      '复试十': false,
      '补位一': false,
      '补位二': false,
      '补位三': false,
      '补位四': false,
      '补位五': false,
      '补位六': false,
      '补位七': false
    },
    show: true,//显示图例
    type: 'scroll', // 启用翻页模式
    orient: 'vertical', // 纵向显示
    right: 15,//以图表大小为准，距离右边多远，类型要为number
    top: 45,//以图表大小为准，距离上面多远，类型要为number
    backgroundColor: '#eee',//图例背景颜色
    padding: 10,//图例的内边距
  },

2、底部缩放条

在这里插入图片描述

  // 底部缩放条配置
  dataZoom: [{
    type: 'slider',//slider表示有滑动块的;inside表示内置的，直接在图表上划 
    start: 0,//从缩放条的0位置开始
    end: 50,//从缩放条的一半位置结束
    bottom: 0,//缩放条显示在底部
    show: true//显示缩放条
  }],