全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

echartslegend设置详解

发布时间:2023-11-25 06:21:23
发布人:xqq

一、echartslegend位置

echartslegend位置可以设置在图表的上方,下方,左侧,右侧以及图表内。例如:


option = {
    legend: {
        // 位置设置在右侧
        right: '10%'
    },
    // 其他配置项
}

设置在右侧,可以使用right属性,值为百分数或者像素值。其他位置同理。

二、echartslegend字体颜色

echartslegend字体颜色可以通过textStyle中的color属性进行设置。例如:


option = {
    legend: {
        textStyle: {
            color: 'red' // 设置字体颜色为红色
        }
    },
    // 其他配置项
}

三、echartslegend滚动

当echartslegend过多而显示不全时,可以启用echartslegend滚动。例如:


option = {
    legend: {
        type: 'scroll',
        // 其他配置项
    },
    // 其他配置项
}

设置type属性为scroll即可开启滚动,此时echartslegend会出现滚动条方便用户查看所有标签。

四、echartslegend大小

echartslegend大小可以通过itemWidth与itemHeight属性进行设置。例如:


option = {
    legend: {
        itemWidth: 20, // 标签宽度为20px
        itemHeight: 10 // 标签高度为10px
    },
    // 其他配置项
}

五、echartslegend宽度

echartslegend宽度可以通过width属性进行设置。例如:


option = {
    legend: {
        width: '80%', // echartslegend宽度为图表宽度的80%
        // 其他配置项
    },
    // 其他配置项
}

设置宽度为百分数或者像素值。

六、echartslegend自定义

echartslegend可以进行自定义,例如添加图标、调整布局等。例如:


option = {
    legend: {
        // 使用自定义图标,布局调整为横向排列
        data: [
            {
                name: '标签1',
                icon: 'path://M0,0 L0,10 L10,5 L0,0', // 自定义图标路径
            },
            {
                name: '标签2',
                icon: 'path://M0,0 L0,10 L10,5 L0,0',
            },
            {
                name: '标签3',
                icon: 'path://M0,0 L0,10 L10,5 L0,0',
            }
        ],
        orient: 'horizontal', // 横向排列
        // 其他配置项
    },
    // 其他配置项
}

七、echartslegend间距

echartslegend标签之间可以通过padding与itemGap属性进行设置。padding调整整个echartslegend区域的内边距,itemGap调整标签之间的距离。例如:


option = {
    legend: {
        padding: 20, // 内边距为20px
        itemGap: 10 // 标签之间距离为10px
    },
    // 其他配置项
}

八、echarts位置选取

将上面的相关属性结合起来,可以灵活地进行echartslegend位置的选取。例如:


option = {
    legend: {
        type: 'scroll',
        orient: 'horizontal',
        width: '80%',
        itemWidth: 20,
        itemHeight: 10,
        padding: 20,
        itemGap: 10,
        textStyle: {
            color: 'red'
        },
        // 其他配置项
    },
    // 其他配置项
}

echartslegend位置

相关文章

详解SpringMVC 404错误

详解SpringMVC 404错误

2023-11-25
linux匹配中文,linux精确匹配字符串

linux匹配中文,linux精确匹配字符串

2023-11-25
Powershell快捷键全面详解

Powershell快捷键全面详解

2023-11-25
getjsonobject用法详解

getjsonobject用法详解

2023-11-25

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取