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

最新推荐文章于 2024-07-10 16:55:03 发布

原创

最新推荐文章于 2024-07-10 16:55:03 发布 · 5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

文章介绍了如何在Echarts中将legend配置为虚线样式，通过使用svg路径来手动实现这一效果。提供了代码实例，展示如何设置icon属性，以及可以从iconfont等资源获取svg代码并拼接成path://格式来创建所需图标。

文章目录

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

最低0.47元/天解锁文章