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="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
  <script type="text/javascript">
  // 替换自己需要的图标
    var iconActive = 'image://http://172.16.20.114:1234/check.png'
    var iconUnActive = 'image://http://172.16.20.114:1234/icon-checkbox.png'
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var data = genData(10);
    option = {
      title: {
        text: '同名数量统计',
        subtext: '纯属虚构',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        left: 10,
        top: 20,
        bottom: 20,
        data: data.legendData,
        // 设置图标，防止变形
        itemWidth:16,
        itemHeight:16,
        selected: data.selected
      },
      series: [
      {
        name: '姓名',
        type: 'pie',
        radius: '55%',
        center: ['40%', '50%'],
        data: data.seriesData,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0。5)'
          }
        }
      }]
    };




    function genData(count) {
      var nameList = [
        '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
      ];
      var legendData = [];
      var seriesData = [];
      var selected = {};
      for (var i = 0; i < 10; i++) {
        name = Math.random() > 0.65 ?
          makeWord(4, 1) + '·' + makeWord(3, 0) :
          makeWord(2, 1);

        legendData.push({
          name,
          icon: i < 6 ? iconActive : iconUnActive
        });
        seriesData.push({
          name: name,
          value: Math.round(Math.random() * 100000),
        });
        selected[name] = i < 6;
      }

      return {
        legendData: legendData,
        seriesData: seriesData,
        selected: selected
      };

      function makeWord(max, min) {
        var nameLen = Math.ceil(Math.random() * max + min);
        var name = [];
        for (var i = 0; i < nameLen; i++) {
          name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
        }
        return name.join('');
      }
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>

  <!-- 看这里看这里  -->
  <script type="text/javascript">
    // 监听事件 根据选中的状态修改图标
    // 图标变形 通过设置 {legend：{itemWidth:'图标宽',itemHeight:'图标高'}}
    // 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 }
      })
    })
  </script>
</body>

</html>

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

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

猜你喜欢