echart设置将图例文字放置在图例图标icon中

最新推荐文章于 2025-03-16 16:21:29 发布

陈恒_nick

最新推荐文章于 2025-03-16 16:21:29 发布

阅读量1.8k

点赞数 1

分类专栏： HTML 文章标签： echarts 图例图例文字图例文字放置图例中图例icon

本文链接：https://blog.csdn.net/nick_chain/article/details/115630927

版权

本文介绍了如何使用ECharts将图例的文字放置在图例的图标内部，通过调整配置项legend，实现了图例文字与图例图标的一体化展示。示例代码和ECharts官方文档链接提供了详细实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将图图表的图例设置如图所示，将图例文字放置在图例图标中。

原图图表是这样的：https://echarts.apache.org/examples/zh/editor.html?c=line-stack

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六',