Echarts的legend使用介绍

超、凢脫俗 2023-07-12 06:24 14阅读 0赞

当我们在实际的业务开发的时候使用这些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'}
        }, '降雨量']
    }

> 由于selected与data那里我感觉我描述的不是很好，所以截了个图进行说明：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]

有可能会有朋友不知道笔者是在哪里知道这些内容的。那么笔者今天就告诉你，我是翻文档知道的。。。  
[https://echarts.apache.org/zh/option.html\#legend][https_echarts.apache.org_zh_option.html_legend]

如果还有哪里感觉不太清楚可以下方评论也可以自己去一边试一边摸索哦~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200307182521995.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[https_echarts.apache.org_zh_option.html_legend]: https://echarts.apache.org/zh/option.html#legend