修改ECharts显示的图例legend的形式

末蓝、 2023-01-15 03:40 283阅读 0赞

使用ECharts的实例进行举例：

app.title = '环形图';

option = \{  
    tooltip: \{  
        trigger: 'item',  
        formatter: "\{a\} <br/>\{b\}: \{c\} (\{d\}%)"  
    \},  
    legend: \{  
        orient: 'vertical',  
        x: 'left',  
        icon:'roundRect',  
        data:\['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'\]  
    \},  
    series: \[  
        \{  
            name:'访问来源',  
            type:'pie',  
            radius: \['50%', '70%'\],  
            avoidLabelOverlap: false,  
            label: \{  
                normal: \{  
                    show: false,  
                    position: 'center'  
                \},  
                emphasis: \{  
                    show: true,  
                    textStyle: \{  
                        fontSize: '30',  
                        fontWeight: 'bold'  
                    \}  
                \}  
            \},  
            labelLine: \{  
                normal: \{  
                    show: false  
                \}  
            \},  
            data:\[  
                \{value:335, name:'直接访问'\},  
                \{value:310, name:'邮件营销'\},  
                \{value:234, name:'联盟广告'\},  
                \{value:135, name:'视频广告'\},  
                \{value:1548, name:'搜索引擎'\}  
            \]  
        \}  
    \]  
\};  
修改下图中的icon参数，显示不同的风格样式。  
ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, 'none’

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW54aW4xMDIx_size_16_color_FFFFFF_t_70][]  
circle：圆形

![在这里插入图片描述][20190225163640522.png]

rect：矩形

![在这里插入图片描述][20190225163738595.png]

roundRect：圆角矩形

![在这里插入图片描述][20190225163819680.png]

triangle：三角形

![在这里插入图片描述][20190225163851510.png]

diamond：菱形

![在这里插入图片描述][20190225163920965.png]

arrow：箭头形

![在这里插入图片描述][20190225164002189.png]

none：没有

![在这里插入图片描述][20190225164035120.png]

可以通过点击图例形状或者文字，让该图例所代表的的部分，显现或者隐藏。

注意： 可以设置itemHeight的值，调整粗细：

itemHeight: 0.5, // 粗细  
  
原文链接：https://blog.csdn.net/jianxin1021/article/details/87919767

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW54aW4xMDIx_size_16_color_FFFFFF_t_70]: /images/20221022/590d26ad27f44feb94ee9957a112cf21.png
[20190225163640522.png]: /images/20221022/1686be4d38a1422c886fde404ec26913.png
[20190225163738595.png]: /images/20221022/e5d3241e23de41c0bf2cc6e1c13d47bc.png
[20190225163819680.png]: /images/20221022/8e634c4518084d4b84c1326c9f1a9a84.png
[20190225163851510.png]: /images/20221022/97cd24f8c07441079d2c5eb7a39e3425.png
[20190225163920965.png]: /images/20221022/478ae3f937c2465893fe6c8af8218d21.png
[20190225164002189.png]: /images/20221022/2156d3168f464ae0a183f138db27b069.png
[20190225164035120.png]: /images/20221022/9ddfe1af1e104778912c6f556cc973d9.png