echarts-legend-自定义图例的图标，未激活图例置灰

最新推荐文章于 2024-07-31 11:20:46 发布

qq_23090775

最新推荐文章于 2024-07-31 11:20:46 发布

阅读量4.5k

点赞数 1

文章标签： echart legend 自定义图例

本文链接：https://blog.csdn.net/qq_23090775/article/details/82988436

版权

本文介绍了如何使用echarts库实现图例自定义图标，并在图例未被选中时将其置灰。通过设置legend组件的data属性为每个图例指定图标，同时监听legendselectchanged事件来实现图例状态的改变。

摘要由CSDN通过智能技术生成

echarts 图例自定义图标，未激活图标置灰

实现的效果图
在这里插入图片描述

通过legend中的data来为每一个图列设置icon，

option={
    
		//...
		legend:{
    
			itemHeight：'图标的高',
			itemWidth:'图标的宽',
			data:[{
    name:'图例1',icon:'图标1'},...]
		}
		//...
	}

监听legendselectchanged 事件

    // data是http://echarts.baidu.com/examples/editor.html?c=pie-legend 例子中的data
    myChart.on('legendselectchanged', function (params) {
    

      let {
    selected,name} = params
      let theOption = data.legendData.find(dt => dt.name === name)
    
      // iconActive 选中的图标 
      // iconUnActive 没有选中的图标
      theOption.icon = selected[name] ? iconActive : iconUnActive
      // 更新图列
      myChart.setOption({
    
        legend: {
     data: data.legendData }
      })
    })

然后就ojbk 了

完整的代码

<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
  <script type=