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.让图例响应一些其它事件

原文地址:https://www.cnblogs.com/MrZhujl/p/12368288.html

时间: 2024-11-10 14:28:48

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

实现echarts的legend属性设置

通过设置 legend 属性进行控制 参考文章: https://blog.csdn.net/xxtnt/article/details/96114386 原文地址:https://www.cnblogs.com/pxjbk/p/12155988.html

Js + echarts - Pie legend 位置调整和值添加

var drawPieChart=function(chartId,titleText){ var chartData=[ {value:335, name:'原因1',trend:'up'}, {value:310, name:'原因2',trend:'up'}, {value:234, name:'原因3',trend:'dw'}, {value:135, name:'原因4',trend:'dw'}, {value:1548, name:'原因5',trend:'eq'} ] var op

LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!

LinearLayout的gravity属性以及其子元素的layout_gravity何时有效 转自:http://www.cnblogs.com/xiaoran1129/archive/2013/03/26/2982733.html 相信对于Android的初学者来说,大家都曾经被layout里这两个极其相似的属性迷惑过. 简单使用一下搜索工具,我们就不难找到下面这样的答案: layout_gravity 表示组件自身在父组件中的位置 gravity             表示组件的子组件在

option标签selected="selected"属性失效的问题

要在select标签上面加上autocomplete="off"关闭自动完成,不然浏览器每次刷新后将自动选择上一次关闭时的option,这样默认属性selected="selected"就会失效啦 要记住每次遇到select标签时就最好要加上autocomplete="off"这一项

HTML option 标签的 selected 属性

HTML option 标签的 selected 属性 http://www.w3school.com.cn/tags/att_option_selected.asp 1.一般做WEB的时候,Chrome的兼容性会比较好,但是这里有个特殊的情况,下面的方法,Chrome会有问题. Chrome版本:版本67.0.3371.0(正式版本) (32 位) 效果图 这里写图片描述 反例如下:(Chrome连续点击resetOption.setOption.resetOption.setOption就会

ajax的async属性(控制同步和异步)

ajax中async属性用于控制同步和异步. true(异步请求,默认).意思是AJAX代码运行中的时候其他代码一样可以运行. flase(同步).意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面会出现假死状态,当AJAX执行完毕后才会继续运行其他代码,解除页面假死状态. $('input[type=button]').click(function(){ $.ajax({ url:'/test', type:'get', data:data, async:true, s

Cellpadding 和 Cellspacing 属性来控制表格边框间距

原文:大专栏  Cellpadding 和 Cellspacing 属性来控制表格边框间距 原文地址:https://www.cnblogs.com/chinatrump/p/11518139.html

浅谈属性动画简单使用之实现爱的贝塞尔曲线浪漫告白效果(三)

谁说程序员不浪漫的啊,每次看到别人在黑程序员心中就有一种无奈,只是他们看到的是程序员不好的一面,今天我将用这个案例告诉那些人,程序猿也是一个很浪漫,很有情调的人.在程序员心中他们只想做最高效的事情,没有什么比效率更重要了.那就开始今天程序猿的告白之旅. 我们都知道属性动画有个强大的地方,它实现让某个控件按照我们指定的运动轨迹来运动.也就是说它可以按照一个抛物线来运动,也可以按照一个线性的线来运动,还可以按照我们今天所讲的贝塞尔曲线的轨迹来运动.为什么他可以按照某一个轨迹来运动呢??首先我们来分析

echarts中的option.legend.data has not been defined.

1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec) { var mapChart = ec.init(document.getElementById('mapDataChart')); var option = { title : { text: '', x : 'center', y : 'top' }, tooltip : { trigger