• Echarts (option.legend) 图例的属性,外部控制图例的select状态,以达到模拟图例的效果


    先列举一些常用的属性:

    legend: { //图例,这里基本都是默认设置,就不一一列举,echarts 官网很好找
      type: "plain", //'plain':普通图例。缺省就是普通图例。'scroll':可滚动翻页的图例。当图例数量较多时可以使用。
      show: true, //是否显示(隐藏和显示)柱子的那个按钮,默认true,如果不需要可以设置为false。如果没有请忽略。
      selectedMode: true, //图例上的点击事件,不写默认true ,设置false为不能点击
      orient: 'horizontal',// orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)
      data: ['预期', '实际', '假设'], // 需要个 series 中的 name 一致才会显示
      icon: "circle", //图形部份的形状,类型包括 "circle" ¦ "rect" ¦ "roundRect" ¦ "triangle" ¦ "diamond" | "pin" ¦ "arrow" ¦ "none"
      itemWidth: 15, //图例文字旁边图形的宽高
      itemHight: 2,
      itemGap: 40, // 设置间距
      //bottom: "auto", // 默认在顶部,同理 top,right,left, padding都可以设置
      //x: 'left',  // x 设置水平安放位置,默认全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)
      //y: 'top',  // y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)
    }

    再告诉你一个有意思的属性:

    legend = { //图例,这里基本都是默认设置,就不一一列举,echarts 官网很好找
      show: false, // 不显示组件自带的图例
      selected = { // 每一项的变量 需要和 series 中一一对应
        "案例一": true, // true 代表显示 echarts 显示该条数据,相当于 原装图例没有被点击的状态
        "案例二": true,
        "案例三": false, // false 代表显示 echarts 不显示该条数据,相当于 原装图例被点击后(图例置灰,数据隐藏)的状态
      }
    }

    外部通过修改 true , false 就可以达到模拟原装图例的效果,并且还能做点其它事情,

    使用案例:1.让图例的文字可以修改(修改图例文字)。2.让图例响应一些其它事件

  • 相关阅读:
    Community Server 2.0 学习笔记:如何实现在线人数?
    CommunityServer2.0改造的一些心得[粗糙版]
    DotLucene源码浅读笔记(2) : Lucene.Net.Documents
    有意思.在线版的photoshop
    电子商务教程[资源]
    Lucene 1.9 多目录搜索的的一个bug
    小总结:DotLucene如何才能快速生成索引?
    DotLucene源码浅读笔记(1)补遗:编写简单中文分词器ChineseAnalyzer
    Windows下傻瓜式快速搭建Discuz论坛(也可以参考用于搭建其他php论坛)
    Lucene.net常见功能实现知识汇总
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/12368288.html
Copyright © 2020-2023  润新知