Echarts 图例组件

1.图例组件的基本介绍

图例组件legend展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

2.开启图例组件

• 开启图例组件默认时关闭状态，通过配置legend字段后开启此功能

var option = {
    legend: {

    },
}

3.图例的位置

• 通过配置下面字段，可以控制图例组件的位置

属性	说明
left	图例组件离容器左侧的距离
top	图例组件离容器上侧的距离
right	图例组件离容器右侧的距离
bottom	图例组件离容器下侧的距离

legend:{
    data:['视频广告1','联盟广告1','邮件营销1'],
    left: '80%',
    top: '30%',
}

3.图例组件的数据

• 开启图例组件的前提的是series中的数据项必须有name属性：图例组件通过series中数据项的name属性进行关联，如果数据项没有name属性，那么将无法通过图例组件控制这个数据项的展示与隐藏
• 图例组件的按钮数量与legend.data字段的值（数组长度）相关，data中有多少个数据，就生成多少个按钮（可以以此来精确控制展示那个按钮，但是没什么意义，因为其对应的图表项还是会展示）
• legend.data字段的值默认为series中的数据项中name属性的集合，以下写法是等价的

legend: {

},
series: [{
    name: '1#冲床 80吨',
    data: [820, 932, 901, 934, 1290, 1330],
    type: 'bar'
},
{
    name: '1#注塑机',
    data: [600, 652, 571, 654, 990, 1530],
    type: 'bar'
}]

legend: {
    data: ['1#冲床 80吨', '1#注塑机']
},
series: [{
    name: '1#冲床 80吨',
    data: [820, 932, 901, 934, 1290, 1330],
    type: 'bar'
},
{
    name: '1#注塑机',
    data: [600, 652, 571, 654, 990, 1530],
    type: 'bar'
}]

4.图例组件的样式

• 样式非两种，正常展示时的样式和关闭时的样式

legend: {
     textStyle:{
          color: "rgba(255,255,255,0.8)"
     },//正常状态的文本样式
     itemStyle:{

     },//正常状态的按钮样式
     inactiveColor:"rgba(255,255,255,0.3)",//图例关闭时的颜色
},

5.单独配置某个图例项

• legend.data数组的元素的值默认情况是字符串，如果需要可以将其扩展成一个对象，依次拓展出更多的配置功能，例如图标种类，文本样式

legend: {
    data: [
        {
            name: '1#冲床 80吨',//对应series中的name
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
                color: 'red'
            },
            itemStyle:{},//按钮样式
        },{
	    name: '1#注塑机',//对应series中的name
            // 强制设置图形为方。
            icon: 'rect',
            // 设置文本为蓝色
            textStyle: {
                color: 'blue'
            }
       }
    ]
},

6.多坐标系

• 一般情况下legend字段的值是一个对象，表示当前只有一个图例组件
• 如果当前图表有多个坐标系，或者有多个饼图这种，此时需要将legend配置成一个数组，每个数组元素对应一个坐标系或者饼图

legend: [
    {
         icon: 'circle',
         left: '65%',
         top: '25%',
         data: ['A','B'],
    },
    {
         icon: 'circle',
         left: '25%',
         top: '70%',
         data: ['C','D']
    }
],
series:[
{
    type:"pie"
    data:[{name:A,value:1},{name:B,value:2}]
},
{
    type:"pie"
    data:[{name:C,value:1},{name:D,value:2}]
}
]

7.配置图例以及相关数据的展示状态

• 默认情况下，会显示所有的图例，如果想隐藏某些系列的数据，可以使用selected字段进行配置

legend: {
    data: ['1#冲床80吨', '1#注塑机'],
    selected: {
        '1#冲床80吨': true,
        '1#注塑机': false
    }
}

8.图例过多，分页展示

• 将type属性设置为scroll即可，滚动方向由orient属性设置

legend:{
    type: 'scroll',
    orient: 'vertical',//horizontal水平滚动 vertical垂直滚动
    right: 20,
    top: 20,
    bottom: 20,
    selected: selectedData
},

9.legend组件的高度

• 分页展示图例时，要么横向滚动（单行），要么垂直滚动（单列），如果想要多行自适应高度，需要在渲染前获取其所需的高度，并渲染到echarts容器中
• 在此逻辑下，echarts容器的高度分为3个部分：网格区域（网格区域的位移需要动态设定），x轴文本区域（可能有旋转，高度大概60），legend高度，其中网格高度和x轴文本高度是固定的
• 此需求下echarts容器的高度是动态的，如果是第一次渲染，则等待echarts容器高度渲染完成后再进行初始化，如果是第二次渲染，则调用resize()方法自适应新的高度

调用顺序

//1.要渲染的数据进行格式转换
//2.计算legend高度，并将新高度渲染到echarts容器中
//3.等到新高度渲染完毕，准备option进行渲染
//初始化echart
if(!this.echarts_instance){
      this.echarts_instance = echarts.init(document.querySelector('#echarts'))
}else{
     //刷新高度
     this.echarts_instance.resize()
}
var option = {}
this.echarts_instance.setOption(option)

代码

//模拟legend高度
            getLegendHeight(name_list,config = {}){
                //参数初始化
                var width = config.width? config.width : document.body.clientWidth
                var itemGap = config.itemGap? config.itemGap : 10
                var itemWidth = config.itemWidth? config.itemWidth : 25
                var itemHeight = config.itemHeight? config.itemHeight : 14
                var padding = config.padding? config.padding : 5
                var fontSize = config.fontSize? config.fontSize : 12
                //创建元素 装载所有图例的容器
                var legend_box = document.createElement('div')
                //设定容器宽度(echarts容器的宽度)
                legend_box.style.width = width + 'px'
                //遍历图例名称，模拟生成图例元素
                name_list.forEach(name=>{
                    //图例项容器
                    var legend_item = document.createElement('div')
                    legend_item.style.display = 'inline-block'
                    legend_item.style['margin-right'] = itemGap + 'px'

                    //图标元素
                    var icon_item = document.createElement('span')
                    icon_item.style.display = 'inline-block'
                    icon_item.style.width =  (itemWidth + padding*2) + 'px'
                    icon_item.style.height =  (itemHeight + padding*2) + 'px'

                    //名称容器
                    var name_item = document.createElement('span')
                    name_item.innerHTML = name
                    name_item.style.fontSize = fontSize + 'px'

                    //添加到图例容器中
                    legend_box.appendChild(icon_item)
                    legend_box.appendChild(name_item)
                })
                //插入到页面中
                document.body.appendChild(legend_box)
                //保存高度
                var legend_height = legend_box.clientHeight
                //从页面中移除
                document.body.removeChild(legend_box)
                //返回数据
                return legend_height
            }