实用技巧 一文解决 echarts 如何设置 legend 展示为虚线？

文章目录

• • 一、echarts配置legend选项为虚线？
  • 二、效果及代码实例
  • 三、svg 路径如何查找

一、echarts配置legend选项为虚线？

我们可以参考echarts的官方文档，他给出了我们circle, rect, roundRect, triangle, diamond, pin, arrow, none 这些配置项，以及一系列的数据项，我们可以参考社区的对应文档

150种legend-----图例

里面对应着很多常用的legend图形，当然-没有虚线，这个时候我们就需要利用到官网给出的icon属性去进行手动实现

参照官网：

我们可以使用图片路径，也可以使用 svg 路径

二、效果及代码实例

function random(num) {
    return Math.floor(Math.random() * num);
}


option = {
        title: {
        text: '虚线 legend',
    },
    legend: {
        top: '50%',
        itemWidth: 24,
        itemHeight: 24,
        data: [{
        name:'虚线',
        icon:'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z'
    }]
    },
    grid: {
        height: '40%'
    },
    xAxis: {
        data: ['']
    },
    yAxis: {},
    series: [
        {
        name:'虚线',
        type: 'bar',
        data: [random(1000)]
    }
        ]
};

三、svg 路径如何查找

我们可以参照iconfont，下载svg

复制里面的svg代码

<svg t="1680586937240" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2602" width="200" height="200"><path d="M934.4 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM115.2 490.666667h-34.133333a25.6 25.6 0 1 0 0 51.2h34.133333a25.6 25.6 0 1 0 0-51.2zM388.266667 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM251.733333 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM524.8 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM797.866667 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM661.333333 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2z" fill="#FF0000" p-id="2603"></path></svg>

拼接 path:// + path 里面的 d 属性

path://M934.4 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM115.2 490.666667h-34.133333a25.6 25.6 0 1 0 0 51.2h34.133333a25.6 25.6 0 1 0 0-51.2zM388.266667 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM251.733333 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM524.8 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM797.866667 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM661.333333 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2z

随即也就实现了效果