前言：简单介绍图例的配置属性，再后续每一个属性的配置中，我都会一个一个进行实验，将遇到的问题和疑问记录下来，同大家一起熟练的使用 Echarts 可视化工具。
一、图例的 option 属性配置
// 图例 标题
option = {
legend:{
// 统一设置的属性，在每一个data系列中设置无效
type:"plain", //是否可滚动翻页，用于图例太多，超出容器时配置。
id:'1', //引用组件
show:true, //是否展示图例
zlevel:1, //所有图形图层优先级
z:2, // 图例中所有图形的 优先级，控制图形前后顺序，实现堆积效果
// 图例容器属性 偏移量 可设置 'auto' | 20% | 20
left:'auto', //图例离容器左侧距离
right:'20%', //图例离容器右侧距离
top:20, //图例离容器上侧距离
bottom:'auto' //图例离容器下侧距离
widht:'20%', // 图例容器的宽度
height:200, // 图例容器的高度
orient:'vertical', //图例列表排列方式 横、竖
align:'left', //图例文字 在图例图形的左还是右
padding:[5,10,5,10], //图例容器内边距
backgroundColor:'red', //图例容器的背景颜色
borderColor:'red', //图例容器的边框颜色
borderWidth:2, //图例容器的边框宽度
borderRadius:[5,5,5,5], //图例容器的圆角
shadowBlur:20, //图形容器的阴影程度
shadowColor:'red', //图形容器的阴影颜色
shadowOffsetX:20, //阴影在水平方向上的偏移
shadowOffsetY:20, //阴影在竖直方向上的偏移
formatter:"图例名称", //手动配置图例的文字内容
selectedMode:true, //图例图形是否可点击
selected:{
'数据一名称':true, //数据一初始化展示
'数据二名称':false, //数据二初始化不展示
},
itemGap:10, //图例之间的距离
itemWidth:25, //图例图形宽度
itemHeight:25, //图例图形高度
//图例分页时的属性 ，每页的个数会按照图例容器的大小自动展示
scrollDataIndex:5, //图例分页时，指定当前最左边的是哪一个图例
pageButtonItemGap:10, //图例分页时，按钮和文字的间隔
pageButtonGap:10, //图例分页时，按钮和图例之间的间隔
pageButtonPosition:'end', //图例控件的位置
pageFormatter:'{current}/{total}', //页码展示信息
pageIcons:{
horizontal:['url','url'], // 横向分页时，上一页下一页的icon
vertical:['url','url'], // 纵向分页时，上一页下一页的icon
},
pageIconColor:'#aaa', //翻页按钮的颜色
pageIconInactiveColor:'#aaa' //翻页按钮到底时，禁止点击的颜色
pageIconSize:[5,5], //翻页按钮大小
//下面这个样式和 图例文本样式配置相同，大肠包小肠
pageTextStyle:{···略}, //分页信息中文字的样式
animation:true, //分页是否需要动画
animationDurationUpdate:800 //动画时长
// emphasis 图例强调效果，这个配置一直没有在图例中使用成功，还请各位解答一下
emphasis:{
//求解答！
}
//图例统一关闭和开启的选择器
selector:[
{
type:'all', //按钮是选中还是取消功能
title:'全选', //按钮中的文字
},
{
type:'inverse',
title:'反选'
}
]
// 选择器的样式 好像没有直接设置选择器宽度、高度的配置
selectorLabel：{
show:'文字', //是否显示按钮中的文字
distance:5, // 距离图形元素距离，我这里设置无效，没有深究
rotate:80, //标签旋转
offset:[10,10], //文字偏移
//文字样式，请直接参考下文中的 图例文本统一样式的 textStyle的配置项
color:'#fff', //文字颜色
fontStyle:'normal', //字体风格
// ···略 请直接参考下文中的 图例文本统一样式的 textStyle的配置项
}
selectorPosition:'auto', //选择器在图例盒子中的位置
selectorItemGap:10, //选择器按钮之间的间隔
selectorButtonGap:10, //选择器距离图例的间距
//可在每一个系列中单独设置的图例属性，以下全是
//图例图形样式
itemStyle:{
color:"rgba(198, 39, 39, 1)", //图例图形颜色
borderWidth:3, //图例图形的描边
borderColor:"rgba(40, 36, 36, 1)",//图例图形描边的颜色
borderType: "dashed", //图例图形描边线的类型
borderDashOffset: 10, //图例图形描边虚线的位移量
borderJoin: "round", //图例图形描边线为不连续时，设置描边线两端连接形状
// 这个属性有点离谱了，同情开发这个功能的同志
borderMiterLimit: 5, //图例图形描边为不连续且两端连接形状为 miter 菱形时，菱形的斜接面比例
shadowBlur:2.5, //图例的阴影模糊大小
shadowColor:"rgba(228, 2, 2, 1)", //图例图形阴影颜色
shadowOffsetX: -1.5, //图例图形阴影水平偏移量
shadowOffsetY: 1.5, //图例图形阴影竖直偏移量
opacity:0.5, //图例图形的透明度
decal:'图形链接', //以你上传的图片为准，在图例图形上打上斑点及贴花
},
symbolRotate:50, //图例图形旋转效果，这个属性有点憋屈，我尝试了很多方法，最后才摸索出来如何使用，文章下面会单独介绍。
inactiveColor: "rgba(57, 48, 48, 1)", //图例图形关闭时的样式
inactiveBorderColor: "rgba(187, 72, 72, 1)", // 图例图形关闭时描边的颜色
//当图例图形为线条时的样式设置
lineStyle:{
width:20, //图例图形线条宽度
color: "rgba(245, 73, 73, 1)", //图例图形线条颜色
inherit:'dashed', //图例图形线条类型
inherit:20, //图例图形线条为虚线时，虚线的偏移量
cap:'round', //图例图形线段末端的形状
join:'inherit', //图例图形线段两端连接形状
miterLimit:20, //图例图形线段两端连接形状为 miter 时，斜接面比例
shadowBlur:10, //图例图形的阴影模糊程度
shadowColor: "rgba(188, 3, 33, 1)",//图例图形的阴影颜色
shadowOffsetX:10, //图例图形的阴影水平偏移量
shadowOffsetY:-10, //图例图形的阴影竖直偏移量
opacity:0.5, //图例图形的透明度
},
// 图例文本统一样式
textStyle:{
color:'#333', //字体颜色
fontStyle:'normal', //字体风格
fontWeight:'normal', //字体粗细
fontFamily:'sans-serif', //字体
fontSize:50, //字体大小
lineHeight:20, //行高
backgroundColor:'transparent', //文本盒子的背景颜色
borderColor: "rgba(239, 232, 232, 1)",//文本盒子边框颜色
borderWidth:200, //文本盒子边框宽度
borderType:'solid', //文本描边类型
borderDashOffset:20, //文本描边为虚线时的偏移量
borderRadius:[20,20,20,20], //文本框圆角
padding:[3,4,5,6], //文本框内边距
shadowColor:'transparent', //文本框背景阴影颜色
shadowBlur:20, //文本框背景阴影长度
shadowOffsetX:20, //阴影水平偏移量
shadowOffsetY:20, //阴影竖直偏移量
width:20, //文本框宽度
height:20, //文本框高度
// 文字的样式 在Echarts中，对文字的设置都保持一致，所以下面的部分会大量出现
textBorderColor:"rgba(62, 2, 20, 1)", //文字描边颜色
textBorderWidth:"rgba(62, 2, 20, 1)", //文字描边宽度
textBorderType:'solid', //文字描边类型
textBorderDashOffset:20, //文字描边虚线的偏移量
textShadowColor:'transparent', //文字阴影颜色
textShadowBlur:20, //文字阴影长度
textShadowOffsetX:20, //文字阴水平偏移量
textShadowOffsetY:20, //文字阴竖直偏移量
overflow:'none', //文字内容操作文本框时如何处理
ellipsis:'···', //文字超出设置为截断时，末尾展示内容
tooltip:{
show:true, //这个需要单独做出来展示，内容很多，请期待后期更新
trigger:'axis'
},
},
icon:'diamond', //图例图形的形状，可以自己填入 图片 Url
//单独配置每一个系列(数据)的属性 重点！重点！重点！
data:[
{
name:'系列一', //通过系列名称将数据关联
icon:'diamond', // 该系列的图例图形的形状
symbolRotate:50, //图例图形旋转
inactiveColor: "rgba(57, 48, 48, 1)", //图例图形关闭时的样式
inactiveBorderColor: "rgba(187, 72, 72, 1)", // 图例图形关闭时描边的颜色
//我上面的属性是专门的分了类的，这里可以直接复用的包括以下：
itemStyle:{}, // 图例图形样式
lineStyle:{}, // 当图例图形为线条时的样式设置
textStyle:{} // 图例文本统一样式,具体的内容属性直接参考上面存在的实例来就是，这里不再重复
},
{
name:'系列二', //通过系列名称将数据关联
icon:'diamond', // 该系列的图例图形的形状
······
}
]
}
}
在以上代码中，有很多都是文字的配置，所有忽略一部分，可直接参考 图例文本统一样式的 textStyle 里面的配置项全可以复用。
二、解刨图
三、单独项介绍
图例的 symbolRotate 旋转效果：
option={
legend:{
icon:"" // 在此处设置图例图形之后，则旋转无效
symbolRotate:50 // 旋转效果，若此处没有设置，则以下面系列中的旋转角度为准
},
series：[{
type:'line' // 图形类型指定，例如散点图、折线图等，其他则无效
symbol: "diamond", // 标记点样式
symbolRotate:90
}],
}
四、遗留，图例的强调效果 emphasis
这个配置我这边有点迷茫，求解！