Echarts的legend使用介绍

原创

A吴迪网络工作室 2021-06-18 16:52:02 ©著作权

©著作权归作者所有：来自51CTO博客作者A吴迪网络工作室的原创作品，请联系作者获取转载授权，否则将追究法律责任

当我们在实际的业务开发的时候使用这些Echarts，G2等等的库肯定不是把官网上简单的demo复制过来就能解决的了的。除非你们公司没有UI设计，页面全由前端同学自己说了算。那么请你当我没说。

接下来我们看一下legend可以配置哪些参数【强烈建议你一边看笔者下面的代码一边去Echars的demo里去试试，或者自己弄个demo程序引入echarts试试】：

legend: {
	orient: 可能值：'horizontal' || 'vertical'。朝向
	x: 可能值： 'right' || 'center' || 'left' || {number}。X轴位置
	y: 可能值： 'top' || 'center' || 'bottom' || {number}。Y轴位置
	backgroundColor: 可能值： '颜色'。背景色
	borderColor: 可能值： '颜色'。边框颜色
	borderWidth: 可能值： {number}。边框宽度
	padding: 可能值： {number | [number, number, number, number]}。内填充
	itemGap: 可能值： {number}。每一项的间距
	itemHeight: 可能值：{number}.控制legend的大小。
	textStyle: 可能值： {color: 'red'}。文本样式可能值是一个obj。
	selected: {
        '降雨量': false
    }, 可能值：{object}。设置图例的某个选项的数据默认为显示还是隐藏。true - 显示。false - 隐藏
    data: [{
        name: '流量',
        icon: 'circle',//'image://../asset/ico/favicon.png',//标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
        textStyle: {fontWeight: 'bold', color: 'orange'}
    }, '降雨量']
}