Echarts图表legend的排版问题（转载）

来源：https://blog.csdn.net/david_jiahuan/article/details/80096922

案例一 

项目中现有样式：

客户需求：将图例分为两列，并且上下两列的图例要对齐：

==================================================

具体思路：将原有的一个 legend，分成7个小 legend 显示（形容的可能不太形象，下面看代码吧）：

（1）原先的代码：

[javascript] view plain copy
 
  1. legend: {  
  2.                 orient: 'horizontal',  
  3.                 top:'8%',  
  4.                 right:'0%',  
  5.                 data: ['0-5分钟','5-15分钟','15-30分钟','30-60分钟','60-120分钟','120-240分钟','大于240分钟'],  
  6.                 textStyle:{  
  7.                     fontSize: difSize_title,  
  8.                     color:'#fff'  
  9.                 }  
  10.             }  

（2）修改后的代码：

[javascript] view plain copy
 
  1. legend:[  
  2.                 {  
  3.                     orient: 'horizontal',  
  4.                     <span style="color:#ff0000;">x : '5%',  
  5.                     y : '10%',</span>  
  6.                     align: 'left',  
  7.                     data: ['0-5分钟'],  
  8.                     textStyle:{  
  9.                         fontSize: difSize_legend,  
  10.                         color:'#fff'  
  11.                     }  
  12.                 },{  
  13.                     orient: 'horizontal',  
  14.                    <span style="color:#ff0000;"> x : '30%',  
  15.                     y : '10%',</span>  
  16.                     align: 'left',  
  17.                     data: ['5-15分钟'],  
  18.                     textStyle:{  
  19.                         fontSize: difSize_legend,  
  20.                         color:'#fff'  
  21.                     }  
  22.                 },{  
  23.                     orient: 'horizontal',  
  24.                     <span style="color:#ff0000;">x : '55%',  
  25.                     y : '10%',</span>  
  26.                     align: 'left',  
  27.                     data: ['15-30分钟'],  
  28.                     textStyle:{  
  29.                         fontSize: difSize_legend,  
  30.                         color:'#fff'  
  31.                     }  
  32.                 },{  
  33.                     orient: 'horizontal',  
  34.                    <span style="color:#ff0000;"> x : '80%',  
  35.                     y : '10%',</span>  
  36.                     align: 'left',  
  37.                     data: ['30-60分钟'],  
  38.                     textStyle:{  
  39.                         fontSize: difSize_legend,  
  40.                         color:'#fff'  
  41.                     }  
  42.                 },{  
  43.                     orient: 'horizontal',  
  44.                    <span style="color:#ff0000;"> x : '5%',  
  45.                     y : '15%',</span>  
  46.                     align: 'left',  
  47.                     data: ['60-120分钟'],  
  48.                     textStyle:{  
  49.                         fontSize: difSize_legend,  
  50.                         color:'#fff'  
  51.                     }  
  52.                 },{  
  53.                     orient: 'horizontal',  
  54.                   <span style="color:#ff0000;">  x : '30%',  
  55.                     y : '15%',</span>  
  56.                     align: 'left',  
  57.                     data: ['120-240分钟'],  
  58.                     textStyle:{  
  59.                         fontSize: difSize_legend,  
  60.                         color:'#fff'  
  61.                     }  
  62.                 },{  
  63.                     orient: 'horizontal',  
  64.                   <span style="color:#ff0000;">  x : '55%',  
  65.                     y : '15%',</span>  
  66.                     align: 'left',  
  67.                     data: ['大于240分钟'],  
  68.                     textStyle:{  
  69.                         fontSize: difSize_legend,  
  70.                         color:'#fff'  
  71.                     }  
  72.                 }  
  73.             ],  

==========关键点就是每个小legend的x和y的值！定好每个小legend所在的绝对位置！

 

案例二   

1效果图

2）代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
//饼图二级
    function RowOnClickPieShow2(rowPieA) {
        //一级数据
        var rowPie = {};
        //二级数据
        var rowPie2 = {};    
        if (rowPieA.区域) {
            var pieLevel = 0;
            if (Level==1) {
                pieLevel = 2;
            }else if(Level==2){
                pieLevel = 1;
            }
            var url = "@Url.Action("LandscapePie")";
            $.post(url, { regionName: rowPieA.区域, level: pieLevel, year: YearSelect }, function (result) {
                // console.log(result)
                for (var i = 0; i < result.length; i++) {
                    var obj = result[i];
                    if (obj.FactorLevel == 1) {
                        for (var j = 1; j < className.length; j++) {
                            if (obj.ClassName == className[j]) {
                                rowPie[obj.ClassName] = obj.Area.toFixed(2);
                           }
                        }
                    } else if (obj.FactorLevel == 2) {
                        for (var k = 1; k < className2.length; k++) {
                            if (obj.ClassName == className2[k]) {
                                rowPie2[obj.ClassName] = obj.Area.toFixed(2);
                            }
                        }
                    }
                }
                //console.log(rowPie);
                //console.log(rowPie2);
                var option1 = {
                    title: {
                        text: YearSelect + '年' + rowPieA.区域 + '景观要素类型面积统计饼图',
                        //subtext: '纯属虚构',
                        x: 'center',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: [
                            {
                                orient: 'horizontal',
                                x: '1%',
                                y: '10%',
                                align: 'left',
                                data: ['植被'],
                            },
                             {
                                 orient: 'horizontal',
                                 x: '20%',
                                 y: '10%',
                                 align: 'left',
                                 data: ['林地'],
                             },
                            {
                                orient: 'horizontal',
                                x: '20%',
                                y: '19%',
                                align: 'left',
                                data: ['草地'],
                            },
                            {
                                orient: 'horizontal',
                                x: '20%',
                                y: '28%',
                                align: 'left',
                                data: ['农田'],
                            },
 
                            {
                                orient: 'horizontal',
                                x: '1%',
                                y: '37%',
                                align: 'left',
                                data: ['水体'],
                            },
                            {
                                orient: 'horizontal',
                                x: '20%',
                                y: '37%',
                                align: 'left',
                                data: ['水体'],
                            },
 
                            {
                                orient: 'horizontal',
                                x: '1%',
                                y: '46%',
                                align: 'left',
                                data: ['不透水'],
                            },
                             {
                                 orient: 'horizontal',
                                 x: '20%',
                                 y: '46%',
                                 align: 'left',
                                 data: ['建筑'],
                             },
                            {
                                orient: 'horizontal',
                                x: '20%',
                                y: '55%',
                                align: 'left',
                                data: ['道路'],
                            },
                            {
                                orient: 'horizontal',
                                x: '20%',
                                y: '64%',
                                align: 'left',
                                data: ['其他不透水'],
                            },
 
                            {
                                orient: 'horizontal',
                                x: '1%',
                                y: '73%',
                                align: 'left',
                                data: ['裸地'],
                            },
                             {
                                 orient: 'horizontal',
                                 x: '20%',
                                 y: '73%',
                                 align: 'left',
                                 data: ['裸土'],
                             },
                            {
                                orient: 'horizontal',
                                x: '20%',
                                y: '82%',
                                align: 'left',
                                data: ['在建用地'],
                            }
 
                        ] ,
                    series: [
                                {
                                    name: '一级',
                                    type: 'pie',
                                    center: ['70%', '50%'],
                                    radius: [0, '30%'],
                                    label: {
                                        normal: {
                                            show: false,
                                        }
                                    },
                                    data: [
                                         { value: rowPie.植被, name: '植被', itemStyle: { normal: { color: 'rgb(38,115,0)' } } },
                                         { value: rowPie.水体, name: '水体', itemStyle: { normal: { color: 'rgb(0,0,255)' } } },
                                         { value: rowPie.不透水, name: '不透水', itemStyle: { normal: { color: 'rgb(189,0,0)' } } },
                                         { value: rowPie.裸地, name: '裸地', itemStyle: { normal: { color: 'rgb(255,255,0)' } } }
                                    ]
                                },
                                {
                                    name: '二级',
                                    type: 'pie',
                                    center: ['70%', '50%'],
                                    radius: ['40%', '60%'],
                                    label: {
                                        normal: {
                                            show: false,
                                        }
                                    },
                                    data: [
                                        { value: rowPie2.林地, name: '林地', itemStyle: { normal: { color: 'rgb(0,128,0)' } } },
                                        { value: rowPie2.草地, name: '草地', itemStyle: { normal: { color: 'rgb(0,255,0)' } } },
                                        { value: rowPie2.农田, name: '农田', itemStyle: { normal: { color: 'rgb(255,255,160)' } } },
                                        { value: rowPie2.水体, name: '水体', itemStyle: { normal: { color: 'rgb(0,0,255)' } } },
                                        { value: rowPie2.建筑, name: '建筑', itemStyle: { normal: { color: 'rgb(189,0,0)' } } },
                                        { value: rowPie2.道路, name: '道路', itemStyle: { normal: { color: 'rgb(128,128,128)' } } },
                                        { value: rowPie2.其他不透水, name: '其他不透水', itemStyle: { normal: { color: 'rgb(192,220,192)' } } },
                                        { value: rowPie2.裸土, name: '裸土', itemStyle: { normal: { color: 'rgb(255,255,0)' } } },
                                        { value: rowPie2.在建用地, name: '在建用地', itemStyle: { normal: { color: 'rgb(255,233,233)' } } }
                                    ]
                                }
                    ]
                };
                //使用指定的配置项和数据显示图表
                  pie_chart1.setOption(option1,true);
            });
        }
 
    }

　　

 // 上面的变量显示的中文，实际用的是英文。

//以上代码还有改进空间，比如：legend，data 可以通过 for循环得到，特别是某些需要动态显示一部分内容的情况。

posted @   hao_1234_1234  阅读(27766)  评论(2)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2017-06-06 $.each()和$(selector).each()
点击右上角即可分享
微信分享提示