Echarts添加全选图例，Echarts中legend添加全选功能，Echarts控制legend图例显示个数，

Echarts添加全选图例

一般Echarts的引入渲染，有两种方式，一种是组件的方式引入，添加:options对象给渲染，另一种是获取元素节点，利用echarts.init初始化，使用setOption插入值渲染
组件引入

获取元素节点渲染

效果图

此处案例是第一种方式引入并渲染的，直接上代码

在页面的组建中引入
<div>
 <vabChart
        id="main"
        style="width: 100%; height: 600px"
        :options="schoolAllContr"   //数据渲染对象
        @legendselectchanged="legendselect"   //自定义全选事件
      />
</div>
<script>
import vabChart from '@/plugins/echarts'    //引入组件
 export default {
     components: {
      vabChart,  
    },   //注册组件
    data(){
    return{
         schoolAllContrXlegend:[ ]  ，  //legend数据数组
         schoolAllContrValue:[ ] ,        //y轴series数据
       }
    },
    //计算属性
    computed：{
      //和options对应起来
        schoolAllContr() {
        return {
          color: ['#B2CC6E', '#D3DC80', '#EFCD77', '#FB857A', '#E25858'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            data: this.schoolAllContrXlegend,    //  legend数组
            selected: {
              全选: false,      //添加全选，默认没有选中
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'value',
            },
          ],
          yAxis: [
            {
              type: 'category',
              data: this.schoolAllContrX,    //x轴数据
            },
          ],
          series: this.schoolAllContrValue,  
        }
      },
    }，
    methond(){
    		//全选点击事件，处理
		   legendselect(params) {
				        var echarts = require('echarts')   //因为是组件引入的方式，此处需要获取Echarts实例 此处是重点
				        var originChart = document.getElementById('main')   //通过ID获取组件实例
				        if (params.name == '全选') {     //判断首次为true还是false
				          var selectMark = this.schoolAllContr.legend.selected['全选']   //获取整个legend数组中的全选状态作为一个变量
				          var namelist22 = []  
				          namelist22 = this.schoolAllContrXlegend    //声明一个空的新数组存放legend的
				          var selected_item22 = {}           //声明一个空对象用来存放修改后的legend的每一项的值
				          if (selectMark) {   //如果全选默认true进入此循环
				            for (let i = 0; i < namelist22.length; i++) {     
				              let key_name22 = namelist22[i]   
				              selected_item22[key_name22] = false
				              this.schoolAllContr.legend.selected = selected_item22    //如果全选为true,则legend图例中的每一项都为true  否则相反
				            }
				          } else {
				            for (let i = 0; i < namelist22.length; i++) {
				              let key_name33 = namelist22[i]
				              selected_item22[key_name33] = true
				              this.schoolAllContr.legend.selected = selected_item22
				            }
				          }
				          let myChart = echarts.init(originChart)    //重点：上面修改值以后一定要初始化Echarts的数据渲染组件，否则视图不会更新
				          myChart.setOption(this.schoolAllContr,true)     //重点：使用setOption相当于重新赋值，不使用此项不生效
				        }
      },
   }

 }	



</script>

控制legend图例选中的个数

上代码

      schoolAllContrXlegend = [ ] 
schoolAllContrXlegend 是放在data中声明的一个用来存放legend图例变量的数组
   //次数是请求接口以后给schoolAllContrXlegend 数组赋值的地方。因此做legend前多少项选中在此处处理
    this.schoolAllContrXlegend.push('全选') 
     //此处是X轴值的数组，必须添加全选，type.和data字段。否则上面legend就算添加了也不会显示
    this.schoolAllContrValue.push({  
            name: '全选',
            type: 'bar',
            data: [],
          })
          this.schoolAllContrValue.unshift()    //此处一般用push。本案例因为对数据显示顺序有要求因此用了unshift
          var namelist = []     
          namelist = this.schoolAllContrXlegend       //声明一个新的数组用来存放图例数据
          var selected_item = {}								//空对象存放处理后的数据
          for (var i = 0; i < namelist.length; i++) {
            var key_name = namelist[i]
            if (i > 6) {           //默认前6项选中，
              selected_item[key_name] = false   //大于6个其余全部为false不选中
            } else {
              selected_item[key_name] = true  
            }
          }
          this.schoolAllContr.legend.selected = selected_item   //将处理后的数据赋值给legend的selected为是否要选中

第二种方式，渲染Echarts的方式，添加全选图例和全选事件

//在template中的节点div
<template>
 <div id="yFenxi" style="width: 100%; height: 600px"></div>
</template>
//导入Echarts
import Echarts from 'echarts'
//data中声明数据
data(){
     return{
        legendName:[ ],   //图例名称数组
        xAxisNames:[ ] , //x轴名称数组
        
     }
}

            this.legendName.push('全选')
            setTimeout(() => {
              this.myChart = Echarts.init(document.getElementById('yFenxi'))
              var option = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                  },
                },
                legend: {
                  data: this.legendName,
                  top: '5%',
                  selected: {
                    全选: false,
                  },
                },
                grid: {
                  containLabel: true,
                },
                xAxis: {
                  type: 'category',
                  data: this.xAxisNames,
                  axisLabel: {
                    // interval: 20, // 坐标轴刻度标签的显示间隔
                    // rotate: 40, // 标签倾斜的角度
                    textStyle: {
                      color: '#000',
                      fontSize: 12,
                      itemSize: '',
                    },
                  },
                },
                yAxis: {
                  type: 'value',
                  // max: 2,
                  // min: -2
                },
                series: [
                  {
                    name: '浙江',
                    type: 'line',
                    data: this.zhejiangData,
                  },
                  {
                    name: '江苏',
                    type: 'line',
                    data: this.jiangsuData,
                  },
                  {
                    name: '总计',
                    type: 'line',
                    data: this.sumData,
                  },
                  {
                    name: '全选',
                    type: 'line',
                    data: [],
                  },
                ],
              }
              this.myChart.setOption(option)   //上面数据绑定以后必须通过获取节点再用setOption方法初始化渲染
              //给当前 this.myChart节点绑定Echarts自带的legendselectchanged点击图例事件
              //params为点击以后的每一项参数，为一个对象
              this.myChart.on('legendselectchanged', function (params) {     
                if (params.name == '全选') {
                  var selectMark = option.legend.selected['全选']   //获取图例中的全选状态，作为一个标记变量
                  //option为上面的Echarts对象
                  var data = option.legend.data
                  if (selectMark) {        //判断
                    for (var i = 0; i < data.length; i++) {
                      option.legend.selected[data[i]] = false
                    }
                  } else {
                    for (var i = 0; i < data.length; i++) {
                      option.legend.selected[data[i]] = true
                    }
                  }
                  this.setOption(option)
                }
              })
              let _this = this
              //点击以后初始化重置大小
              window.onresize = function () {
                _this.myChart.resize()
              }
            }, 1000)