echarts之legend-改变图例的图标为自定义图片

本文介绍如何使用ECharts自定义图例样式,包括调整图例布局、改变文本样式及使用自定义图标等高级配置。

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

legend是echarts中的图例

名称类型默认值可选值效果
dataArray[]图例内容数组,数组项通常为{string},每一项代表一个系列的name,默认布局到达边缘会自动分行(列),传入空字符串”可实现手动分行(列)。 使用根据该值索引series中同名系列所用的图表类型和itemStyle,如果索引不到,该item将默认为没启用状态。 如需个性化图例文字样式,可把数组项改为{Object},指定文本样式和个性化图例icon

先来一个demo

    legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:['蒸发量','降水量','最低气温']
    }

效果图如下:
demo

自定义每个图例样式

    legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:[
            {
                name:'蒸发量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#cccccc'
                },
                icon:'stack'
            },
            {
                name:'降水量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#df3434'
                },
                icon:'pie'
            }
        ]
    }

效果图如下:
 自定义每个图例样式

修改图例的图标为自定义图片

首先我找了如下两张图片放在根目录下的images文件夹下
两个icon文件

    legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:[
            {
                name:'蒸发量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#cccccc'
                },
                icon:'image://./images/icon1.png'//格式为'image://+icon文件地址',其中image::后的//不能省略
            },
            {
                name:'降水量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    icon:'image://./images/icon2.png'//格式为'image://+icon文件地址',其中image::后的//不能省略
                },
                icon:'pie'
            }
        ]
    }

效果图如下:
图例的图标为自定义图片

### ECharts 自定义 Legend 图标ECharts 中,可以通过多种方法实现图例Legend图标自定义。以下是详细的说明以及代码示例。 #### 默认的图例项 Icon ECharts 提供了默认的图例图标样式,这些图标可以满足基本需求。如果需要更复杂的定制化效果,则需采用其他方式来修改图标样式[^2]。 #### 使用图片链接或 Base64 图片作为图例图标 通过 `legend.icon` 属性,可以直接指定一个 URL 或者 Base64 编码的图片地址作为图例项的图标。这种方式适合于使用现成的图像资源进行替换。 ```javascript option = { legend: { data: ['系列A'], icon: 'image://https://example.com/icon.png' }, series: [{ name: '系列A', type: 'line', data: [10, 20, 30] }] }; ``` 此代码片段展示了如何利用外部图片替代默认的图例图标。 #### 使用矢量路径自定义图例图标 除了静态图片外,还可以借助 SVG 的 Path 数据来自定义更加灵活多变的图形。这通常用于绘制几何形状或其他复杂图案。 ##### 方法一:单个矢量路径 对于简单的图形设计,可直接输入对应的 path 字符串到配置中: ```javascript option = { legend: { data: ['系列B'], icon: 'path://M384.795 224c-80.721 0-146.117 65.396-146.117 146.117s65.396 146.117 146.117 146.117S530.912 456.834 530.912 370.117c0-80.721-65.396-146.117-146.117-146.117zm0 256c-61.864 0-112-50.136-112-112s50.136-112 112-112 112 50.136 112 112-50.136 112-112 112z' }, series: [{ name: '系列B', type: 'bar', data: [50, 60, 70] }] }; ``` 上述代码实现了基于特定路径数据构建的独特图例外观[^4]。 ##### 方法二:多个矢量路径组合 当存在多个序列时,可通过分号分割不同序列所使用的路径字符串完成批量设定。 ```javascript let paths = [ 'path://M384.795 224...Z', // 替换为实际的第一条路径 'path://M100 10L200...' ]; option = { legend: { data: ['系列C', '系列D'], icon: paths.join(';') }, series: [{ name: '系列C', type: 'scatter', data: [[1, 2]] }, { name: '系列D', type: 'pie', data: [{value: 30}] } ] }; ``` 这里演示了一个场景下同时应用两种不同的矢量路径给两个独立的数据集。 #### 监听图例交互事件 为了增强用户体验,在某些情况下可能还需要捕获用户的操作行为并对页面做出响应调整。比如切换显示隐藏状态等功能都可以通过绑定回调函数轻松达成目标。 ```javascript myChart.on('legendselectchanged', function(params){ console.log(params); }); ``` 这段脚本注册了一个针对 “legendselectchanged” 类型触发的动作处理器,每当用户改变某个选项卡的选择状况都会被记录下来以便进一步处理逻辑[^3]。 --- ### 总结 综上所述,ECharts 不仅允许开发者简单快速地更改内置样式的呈现形式,还提供了强大的工具支持高度个性化的视觉表达能力。无论是导入现有的素材还是亲手打造独一无二的设计方案都变得触手可及!
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值