详解echartssymbol

发布时间：2023-05-18

一、基本介绍

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

二、制作自定义图标

echarts symbol 支持自定义图标，用户可以根据自己的需求，使用 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 基本可以实现大部分的图表需求，echarts symbol 进一步提供了图标的尺寸和旋转角度的调整功能，通过设置 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 属性的注意事项

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

  1. 当 symbol 为字符串时，它对应着 echarts 内置的图标库中的某一个图标；
  2. 当 symbol 为数组时，它的元素可以是以下三种情况之一：
    • 字符串，与上述情况相同；
    • SVG 路径表达式；
    • Canvas 绘制函数；
  3. symbolRotate 属性的取值范围为 [-180, 180]；
  4. symbolSize 属性可以设置为一个具体的数值或者函数，其中函数的返回值需要是一个数值。

六、总结

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

推荐文章