Echarts学习计之组件---图例（legend）

最新推荐文章于 2024-09-02 11:16:50 发布

苏格拉底的石墩

最新推荐文章于 2024-09-02 11:16:50 发布

阅读量1.1k

点赞数 1

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/weixin_45278644/article/details/108449580

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echarts学习计之组件—图例（legend）

下面是-- legend文本– 的基本配置项

配置项	注释
type	‘plain’：普通图例,‘scroll’：可滚动翻页的图例
show	true(显示)false(不显示)
left	图例组件离容器左侧的距离。‘auto’（自适应）‘left’, ‘center’, ‘right’（可数值可百分比）
top	图例组件离容器上侧的距离。‘auto’（自适应）‘top’, ‘middle’, ‘bottom’ （可数值可百分比）
right	图例组件离容器右侧的距离。 ‘auto’（默认自适应）（可数值可百分比）
bottom	图例组件离容器下侧的距离。 ‘auto’（默认自适应）（可数值可百分比）
width	图例组件的宽度。‘auto’（默认自适应）。（可数值）
height	图例组件的宽度。‘auto’（默认自适应）。（可数值）
orient	图例列表的布局朝向。‘horizontal’（水平），‘vertical’（垂直）
align	图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 ‘right’ 以及纵向布局（orient 为 ‘vertical’）的时候为右对齐，即为 ‘right’。选：‘auto’‘left’‘right’
padding	图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
itemGap	图例每项之间的间隔。横向布局时为水平间隔，纵向为纵向间隔。(数值)
itemWidth	图例标记的图形宽度。（数值）
itemHeight	图例标记的图形高度。（数值）
symbolKeepAspect	如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。（true/false）
formatter	用来格式化图例文本，支持字符串模板和回调函数两种形式。
selectedMode	图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。除此之外也可以设成 ‘single’ 或者 ‘multiple’ 使用单选或者多选模式。
inactiveColor	图例关闭时的颜色。
selected	图例选中状态表

下面是 –legend组件的textStyle样式– 的基本配置项

配置项	注释
color	文字的颜色
fontStyle	文字字体的风格。‘normal’（正常）‘italic’（斜体）‘oblique’（斜体）
fontWeight	文字字体的粗细。‘normal’（正常）‘bold’（加粗）‘bolder’（加粗）‘lighter’（减细）100 /200…（数值）
padding = 5	标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
itemGap = 10	主副标题之间的间距。
zlevel：0	所有图形的 zlevel 值。
z = 2	组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。
left = ‘auto’	title 组件离容器左侧的距离，left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐
top = ‘auto’	title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。
right = ‘auto’	title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
backgroundColor = ‘transparent’	标题背景色，默认透明。颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’
borderColor： ‘#ccc’	标题的边框颜色。支持的颜色格式同 backgroundColor。
borderWidth：0	标题的边框线宽。
borderRadius： 0	圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。如:borderRadius: 5, // 统一设置四个角的圆角大小borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
shadowBlur	图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。示例：{shadowColor: ‘rgba(0, 0, 0, 0.5)’,shadowBlur: 10}注意：此配置项生效的前提是，设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。
shadowColor	阴影颜色。支持的格式同color。注意：此配置项生效的前提是，设置了 show: true。
shadowOffsetX:0	阴影水平方向上的偏移距离。注意：此配置项生效的前提是，设置了 show: true
shadowOffsetY：0	阴影水平方向上的偏移距离。注意：此配置项生效的前提是，设置了 show: true。

注：
zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

下面展示一些在html中的实体举例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title_示例</title>
    <script src="../static/js/echarts/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1500px;height:1000px;border: 10px solid #79dd2a"
"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title: {
            // 下面为基本配置项
            text: 'Title示例', //主标题文本，'\n'指定换行
            link: 'https://www.baidu.com/',//主标题文本超链接,默认值true
            target: 'self',      //当前页面打开链接
            subtext: '苏格拉底的石墩',//副标题文本，'\n'指定换行
            sublink: 'https://www.baidu.com/',//副标题文本超链接,默认值true
            subtarget: 'blank',  //新窗口页面打开链接
            left: 'center', //title 组件离容器左侧的距离。


            // 下面为样式配置
            textAlign: 'auto', //水平对齐-自动对齐----可选值：‘auto’、‘left’、‘right’、‘center’。
            textVerticalAlign: 'auto',   //垂直对齐-自动对齐----可选值：‘auto’、‘top’、‘bottom’、‘middle’。
            borderWidth: 5,  //边框线宽
            borderColor: '#9bff2e', // 边框颜色
            backgroundColor: '#2faa97',  // 背景色
            padding: 50,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
            itemGap: 20,//主副标题纵向间隔，单位px，默认为10

            // 下面为字体样式配置
            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 50, // 字体尺寸
                color: "#aa4539",
                fontStyle: 'italic', // 斜体
                fontWeight: 'lighter', // 减细  normal--正常
            },
            subtextStyle: {//副标题文本样式{"color": "#aaa"}
                fontSize: 20,
                color: "#6836aa",
                fontStyle: 'normal', // 正常
                fontWeight: 'bolder', // 加粗
            },
            zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
            z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
       

        }

    };

    myChart.setOption(option)


</script>
</body>
</html>