https://echarts.apache.org/zh/option.html#legend.data.icon
legend.data.icon的三种使用方式
1.ECharts 提供的标记类型包括
'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'；
这些可以满足B端用户，但远远不够C端用；
2.通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI
URL 为图片链接例如：这种需要额外消费静态资源，显然也不够好，而且也比较死板；
URL 为 dataURI 例如：
3.可以通过 'path://' 将图标设置为任意的矢量路径
这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
使用path://自定义icon
我们去iconfont找一个图标，得到svg代码
图标地址：https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=37352
图标地址.png
使用'删除'这个图标，点击图标下载弹窗，点击复制SVG代码，贴在文档中：
<svg t="1638344561326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="895" width="200" height="200"><path d="M689.93697 66.768094H333.840469a33.384047 33.384047 0 0 1 0-66.768094h356.096501a33.384047 33.384047 0 0 1 0 66.768094zM390.593349 801.217127a33.384047 33.384047 0 0 1-33.384047-33.384047V336.733754a33.384047 33.384047 0 1 1 66.768094 0V767.83308a33.384047 33.384047 0 0 1-33.384047 33.384047zM633.406651 801.217127A33.384047 33.384047 0 0 1 600.912845 767.83308V336.733754a33.384047 33.384047 0 0 1 66.768094 0V767.83308a33.384047 33.384047 0 0 1-34.274288 33.384047zM923.847859 186.282982H100.152141a33.384047 33.384047 0 1 1 0-66.768094h823.473158a33.384047 33.384047 0 1 1 0 66.768094z" p-id="896"></path><path d="M741.348403 1023.77744H282.651597a77.450989 77.450989 0 0 1-77.673549-70.99674L144.441643 275.307107a33.384047 33.384047 0 0 1 66.768094-6.009128L271.523582 946.994132a11.128016 11.128016 0 0 0 11.128015 10.237774h458.696806a11.128016 11.128016 0 0 0 11.128015-10.237774l60.536405-677.696153a33.384047 33.384047 0 1 1 66.768094 6.009128L819.021952 953.00326A77.450989 77.450989 0 0 1 741.348403 1023.77744z" p-id="897"></path></svg>
我们可以看到有两对path标签，每个path标签都有d属性，iconPath = d1 + d2，将两个d属性的值拼在一起iconPath，在echarts中使用如下：
https://echarts.apache.org/examples/zh/editor.html?c=multiple-x-axis
复制一下代码替换以上链接demo里左侧的全部代码即可看到效果，前后代码区别仅增加了option.legend.data配置项，也可只复制option.legend.data配置项贴到以上链接的相应位置。
const colors = ['#5470C6', '#EE6666'];
option = {
color: colors,
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross'
}
},
legend: {
orient: 'vertical',
left: 'left',
data: [
{
name: 'Precipitation(2015)',
// icon: 'path://M0,0L0,30L100,30L100,0zM200,0L200,30L300,30L300,0zM400,0L400,30L500,30L500,0z',
// icon: 'path://M512 186.181818a325.818182 325.818182 0 0 1 325.818182 325.818182h186.181818v46.545455l-189.486545 0.046545a325.911273 325.911273 0 0 1-645.02691 0L0 558.545455v-46.545455h186.181818a325.818182 325.818182 0 0 1 325.818182-325.818182z m0 46.545455a279.272727 279.272727 0 1 0 0 558.545454 279.272727 279.272727 0 0 0 0-558.545454z',
// icon: 'path://M797.61 158.41c13.89 18.85 29.77 30.76 48.29 46.63 14.22 12.57 78.72 68.46 107.82 117.08 32.08 53.58 28.11 109.48 24.48 162.06-16.54 225.9-187.86 372.09-201.09 383-11.58 9.59-104.52 84.67-235.49 108.82 0 0-108.48 19.84-154.46-20.51-2.98-2.32-10.58-8.93-12.24-19.51-1.98-14.22 8.27-26.46 11.58-30.1 27.45-16.87 252.36-138.58 332.73-329.42 25.8-61.52 40.35-138.58 47.63-178.6 14.22-76.07 12.9-111.13 4.63-144.54-9.26-35.72-24.81-62.84-37.04-80.7-1.32-3.31-2.32-6.95-3.64-10.25',
icon: 'path://M689.93697 66.768094H333.840469a33.384047 33.384047 0 0 1 0-66.768094h356.096501a33.384047 33.384047 0 0 1 0 66.768094zM390.593349 801.217127a33.384047 33.384047 0 0 1-33.384047-33.384047V336.733754a33.384047 33.384047 0 1 1 66.768094 0V767.83308a33.384047 33.384047 0 0 1-33.384047 33.384047zM633.406651 801.217127A33.384047 33.384047 0 0 1 600.912845 767.83308V336.733754a33.384047 33.384047 0 0 1 66.768094 0V767.83308a33.384047 33.384047 0 0 1-34.274288 33.384047zM923.847859 186.282982H100.152141a33.384047 33.384047 0 1 1 0-66.768094h823.473158a33.384047 33.384047 0 1 1 0 66.768094zM741.348403 1023.77744H282.651597a77.450989 77.450989 0 0 1-77.673549-70.99674L144.441643 275.307107a33.384047 33.384047 0 0 1 66.768094-6.009128L271.523582 946.994132a11.128016 11.128016 0 0 0 11.128015 10.237774h458.696806a11.128016 11.128016 0 0 0 11.128015-10.237774l60.536405-677.696153a33.384047 33.384047 0 1 1 66.768094 6.009128L819.021952 953.00326A77.450989 77.450989 0 0 1 741.348403 1023.77744z'
}]
},
grid: {
top: 70,
bottom: 50
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'Precipitation ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
// prettier-ignore
data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'Precipitation ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
// prettier-ignore
data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Precipitation(2015)',
type: 'line',
xAxisIndex: 1,
smooth: true,
emphasis: {
focus: 'series'
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Precipitation(2016)',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
data: [
3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
]
}
]
};
image.png
调整icon大小
因为按照path://的方式配置icon是矢量的，所以直接调整图标大小是不合适的，但是我们可以调整图标盒子的大小：legend.itemWidth 和legend.itemHeight，不过这个是批量设置。
