首页 前端知识 实用技巧 一文解决 echarts 如何设置 legend 展示为虚线?

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

2024-05-30 10:05:39 前端知识 前端哥 210 909 我要收藏

文章目录

    • 一、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

随即也就实现了效果

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10110.html
标签
评论
发布的文章

用点jquery实现的登录页面

2024-06-06 00:06:07

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!