Echarts 饼图图例修改，legend样式修改

秒速五厘米 2023-10-01 15:41 78阅读 0赞

### 1、配置如下 ###

var data=[
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' }
                        ]
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                    icon:"circle",
                    formatter:function(name){
                        let target;
                        for(let i=0;i<data.length;i++){
                            if(data[i].name===name){
                                target=data[i].value
                            }
                        }
                        let arr=["{a|"+target+"}","{b|"+name+"}"]
                        return arr.join("\n")
    
                    },
                    textStyle:{
                        rich:{
                            a:{
                                fontSize:16,
                                color:"#EA5504",
                                padding:10
                            },
                            b:{
                                fontSize:14,
                                color:"#333"
                            }
                        }
                    }
    
                },
                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: '搜索引擎' }
                        ]
                    }
                ]
            };

2、分析

//图例图标修改
    icon:"circle",

图例 标题样式修改,lenged 对象里的修改

legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                    icon:"circle",
                    formatter:function(name){ //修改关键
                        let target;
                        for(let i=0;i<data.length;i++){
                            if(data[i].name===name){
                                target=data[i].value
                            }
                        }
                        let arr=["{a|"+target+"}","{b|"+name+"}"]
                        return arr.join("\n")
    
                    },
                    textStyle:{
                        rich:{
                            a:{
                                fontSize:16,
                                color:"#EA5504",
                                padding:10
                            },
                            b:{
                                fontSize:14,
                                color:"#333"
                            }
                        }
                    }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqU6K-6OTI5_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqU6K-6OTI5_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/569a9c21d38747cf81bf696152afb268.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bqU6K-6OTI5,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，78人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 饼状图展示位置 legend

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqU6K-6OTI5_size_20_color_FFFFFF

我不是女神ヾ/ 2023年10月01日 15:41/ 0 赞/ 96 阅读

相关 Echarts 饼图图例修改，legend样式修改

1、配置如下 var data=[ { value: 335, name: '直接访问' },

秒速五厘米/ 2023年10月01日 15:41/ 0 赞/ 79 阅读

相关 echart 玫瑰图 ---- 配置 legend图例

代码如下： var alarmChart; function loadAlarmChart(params) { entAjax(apiAla

叁歲伎倆/ 2023年06月07日 08:24/ 0 赞/ 106 阅读

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

使用ECharts的实例进行举例： app.title = '环形图'; option = \{ tooltip: \{ trigger:

末蓝、/ 2023年01月15日 03:40/ 0 赞/ 353 阅读

相关 Echarts 更改图例(legend)颜色

1 原始效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

叁歲伎倆/ 2023年01月07日 12:26/ 0 赞/ 503 阅读

相关 Echarts分段折线图图例样式visualMap颜色修改

![ff8909a3e2d0e1e37b1b0ade3000e455.png][] textStyle: { //图例文字的样式

Myth丶恋晨/ 2022年12月24日 01:00/ 0 赞/ 896 阅读

相关修改echarts饼状图位置

目录一：修改方法二：效果三：参考一：修改方法 1. `属性` series-pie.center 2. 官方文档

Dear 丶/ 2022年12月19日 11:38/ 0 赞/ 555 阅读

相关 echarts教程（二）：修改echarts面积图修改样式

https://echarts.apache.org/zh/option.html\series-line.areaStyle echarts 的面积图其实是线形图添加`ar

约定不等于承诺〃/ 2022年10月29日 15:23/ 0 赞/ 690 阅读

相关 ggplot2--legend图例的修改

> head(msleep) name genus vore order conservation

太过爱你忘了你带给我的痛/ 2022年08月04日 21:27/ 0 赞/ 371 阅读

相关 echarts 同样配置图例legend

color:['颜色'], 可手动修改图例颜色可通过new this.$echarts.graphic.LinearGradient设置渐变色

桃扇骨/ 2021年07月25日 00:16/ 0 赞/ 668 阅读