详解echartssymbol

小蓝 • 2025-01-01 11:05 • 编程

一、基本介绍

echartssymbol是echarts中的一个重要功能模块，它支持用户自定义各种形状的图标，并且可以通过设置symbolSize、symbolRotate属性对图标进行尺寸、旋转的调整，从而让echarts中展示的图标更加个性化、丰富化。

二、制作自定义图标

echartssymbol支持自定义图标，用户可以根据自己的需求，使用SVG或者Canvas绘制自己的图标，通过echarts中的symbol属性引入自定义的图标，下面是一个简单的自定义图标实例：


option = {
    series: [
        {
            type: "line",
            symbol: "path://M512 896h-384c-70.656 0-128-57.344-128-128v-640c0-70.656 57.344-128 128-128h384c70.656 0 128 57.344 128 128v640c0 70.656-57.344 128-128 128zM128 128c-35.328 0-64 28.672-64 64v640c0 35.328 28.672 64 64 64h768c35.328 0 64-28.672 64-64v-640c0-35.328-28.672-64-64-64h-384c-35.328 0-64-28.672-64-64s28.672-64 64-64h384c35.328 0 64 28.672 64 64v640c0 35.328-28.672 64-64 64h-768c-35.328 0-64-28.672-64-64v-640c0-35.328 28.672-64 64-64z",
            symbolSize: 16
        }
    ]
}

上述代码中，我们使用了一个SVG路径表达式，定义了一个“打勾”的图标，并且将其大小设置为16。

三、调整图标的尺寸和旋转角度

使用echarts基本可以实现大部分的图表需求，echartssymbol进一步提供了图标的尺寸和旋转角度的调整功能，通过设置symbolSize、symbolRotate属性可以轻松实现。


option = {
    series: [
        {
            type: "line",
            symbol: "path://M512 896h-384c-70.656 0-128-57.344-128-128v-640c0-70.656 57.344-128 128-128h384c70.656 0 128 57.344 128 128v640c0 70.656-57.344 128-128 128zM128 128c-35.328 0-64 28.672-64 64v640c0 35.328 28.672 64 64 64h768c35.328 0 64-28.672 64-64v-640c0-35.328-28.672-64-64-64h-384c-35.328 0-64-28.672-64-64s28.672-64 64-64h384c35.328 0 64 28.672 64 64v640c0 35.328-28.672 64-64 64h-768c-35.328 0-64-28.672-64-64v-640c0-35.328 28.672-64 64-64z",
            symbolSize: function(value) {
                return value[2] / 10;
            },
            symbolRotate: -135
        }
    ]
}

上述代码中，我们设置了symbolSize为一个函数，它的返回值是value数组的第三个元素值除以10，这样可以根据数据的不同动态地调整图标的大小。我们同时也对图标的旋转角度进行了设置，将它旋转了135度。

四、使用图标库

echarts为我们提供了常见的图标库，我们可以直接使用图标库中的图标，并调整它的尺寸和旋转角度，下面是一个简单的使用图标库中的图标的实例：


option = {
    series: [
        {
            type: "line",
            symbol: "circle",
            symbolSize: 20,
            itemStyle: {
                normal: {
                    color: "#ff7f50"
                }
            }
        }
    ]
}

上述代码中，我们使用了echarts自带的图标库中的圆形图标，在itemStyle中设置了圆圈的颜色。

五、使用Symbol属性的注意事项

在使用echartssymbol时，需要注意以下几个问题：

1、当symbol为字符串时，它对应着echarts内置的图标库中的某一个图标；

2、当symbol为数组时，它的元素可以是以下三种情况之一：（1）字符串，与上述情况相同；（2）SVG路径表达式；（3）Canvas绘制函数；

3、symbolRotate属性的取值范围为[-180,180]；

4、symbolSize属性可以设置为一个具体的数值或者函数，其中函数的返回值需要是一个数值。

六、总结

echartssymbol是echarts中非常实用的功能模块，它支持用户自定义图标，可以通过设置symbolSize、symbolRotate属性对图标的尺寸和旋转角度进行调整，使用起来非常方便。在使用时，需要注意上述几点。希望本篇文章可以帮助到大家。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/304432.html