ECharts折线图里的legend图标更换以及标题样式问题

傷城~ 2022-10-05 12:59 587阅读 0赞

示例如下图（ECharts提供），有一个需求是更改下图中红框中图标以及字体样式：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]  
**此时需要在`legend`里进行设置，更改图标的属性为`icon`，更改字体样式需要在`textStyle`进行更改。**

代码块如下（legend对象放在option内第一层即可）：

legend: { 
      data:[
        { 
          name: '最高气温',
          textStyle:{ 
            fontSize:12,
            fontWeight:'bolder',
            color:''
          },
          icon:'image://https://img.lanrentuku.com/img/allimg/1206/5-120601154100.gif',
        },
        { 
          name: '最低气温',
          icon:'image://https://img.lanrentuku.com/img/allimg/1206/5-120601154104-50.gif',
        },
      ],
    },

此时效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]  
**`注意`：**  
更改icon时，前缀（image://）不可省略。  
其后可接线上图片地址，也可接本地地址（如：icon:‘image://./img.jpg’）

**`问题来了`**：我在项目里用上面加载本地图片的方式，并没有成功。于是我便采用下面这种方式：

import img from './img.png'

icon:`image://${ img}`,

这样，才实现想要的效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]: /images/20221005/6a5eab5ac02942219c9ea99a26d92979.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]: /images/20221005/99134c934d0a476d93f69380998ac800.png