Echarts图表legend的排版问题（转载）
来源：https://blog.csdn.net/david_jiahuan/article/details/80096922
案例一
项目中现有样式：
客户需求：将图例分为两列，并且上下两列的图例要对齐：
==================================================
具体思路：将原有的一个 legend，分成7个小 legend 显示（形容的可能不太形象，下面看代码吧）：
（1）原先的代码：
- legend: {
- orient: 'horizontal',
- top:'8%',
- right:'0%',
- data: ['0-5分钟','5-15分钟','15-30分钟','30-60分钟','60-120分钟','120-240分钟','大于240分钟'],
- textStyle:{
- fontSize: difSize_title,
- color:'#fff'
- }
- }
（2）修改后的代码：
- legend:[
- {
- orient: 'horizontal',
- <span style="color:#ff0000;">x : '5%',
- y : '10%',</span>
- align: 'left',
- data: ['0-5分钟'],
- textStyle:{
- fontSize: difSize_legend,
- color:'#fff'
- }
- },{
- orient: 'horizontal',
- <span style="color:#ff0000;"> x : '30%',
- y : '10%',</span>
- align: 'left',
- data: ['5-15分钟'],
- textStyle:{
- fontSize: difSize_legend,
- color:'#fff'
- }
- },{
- orient: 'horizontal',
- <span style="color:#ff0000;">x : '55%',
- y : '10%',</span>
- align: 'left',
- data: ['15-30分钟'],
- textStyle:{
- fontSize: difSize_legend,
- color:'#fff'
- }
- },{
- orient: 'horizontal',
- <span style="color:#ff0000;"> x : '80%',
- y : '10%',</span>
- align: 'left',
- data: ['30-60分钟'],
- textStyle:{
- fontSize: difSize_legend,
- color:'#fff'
- }
- },{
- orient: 'horizontal',
- <span style="color:#ff0000;"> x : '5%',
- y : '15%',</span>
- align: 'left',
- data: ['60-120分钟'],
- textStyle:{
- fontSize: difSize_legend,
- color:'#fff'
- }
- },{
- orient: 'horizontal',
- <span style="color:#ff0000;"> x : '30%',
- y : '15%',</span>
- align: 'left',
- data: ['120-240分钟'],
- textStyle:{
- fontSize: difSize_legend,
- color:'#fff'
- }
- },{
- orient: 'horizontal',
- <span style="color:#ff0000;"> x : '55%',
- y : '15%',</span>
- align: 'left',
- data: ['大于240分钟'],
- textStyle:{
- fontSize: difSize_legend,
- color:'#fff'
- }
- }
- ],
==========关键点就是每个小legend的x和y的值！定好每个小legend所在的绝对位置！
案例二
1效果图
2）代码
//饼图二级
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循环得到，特别是某些需要动态显示一部分内容的情况。
Echarts图表legend的排版问题（转载）的更多相关文章
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签（axisLabel）折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- Echarts图表控件使用总结2(Line，Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
- vue-cli ——解决多次复用含有Echarts图表组件的问题
在vue项目里,组件复用是一件很开心的事,可以节省很多时间去排版,达到事半功倍效果,但是昨晚在vue-cli项目里组件复用时发现基于Echarts图表的组件不能够复用,昨晚捯饬了很久,终于还是解决了这 ...
- C#WinForm应用程序中嵌入ECharts图表
C#WinForm应用程序中嵌入ECharts图表 程序运行效果: 下载ECharts: 官网下载ECharts :http://echarts.baidu.com/download.html 或者直 ...
- Echarts图表常用功能配置，Demo示例
先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...
随机推荐
- 26.HashCode
在前面三篇博文中讲解了(HashMap.HashSet.HashTable),在其中不断地讲解他们的put和get方法,在这两个方法中计算key的hashCode应该是最重要也是最精华的部分,所以 ...
- 解析分享链接在微信内转发防封API接口的实现原理
域名被微信封了怎么办?相信这是很多做微信的朋友的疑惑,本人也是做防封的,特此写一篇文章,写给域名被微信封的.被秒封的朋友来看.简单个大家讲一下防封原理和实现方式. 域名拦截因素 我们先来了解一下域名为 ...
- Spark机器学习（上）
1.机器学习概念 1.1 机器学习的定义 在维基百科上对机器学习提出以下几种定义: l“机器学习是一门人工智能的科学,该领域的主要研究对象是人工智能,特别是如何在经验学习中改善具体算法的性能”. l“ ...
- RestTemplate远程调用POST请求：HTTP 415 Unsupported Media Type
这是本项目的接口 称为client @POST @Path("/{urlcode}") @Consumes(MediaTypes.JSON_UTF_8) @Produces(Med ...
- ajax&bootstrap
1.ajax 后台 # 通过flask框架搭建后台 from flask import flask,request # 创建一个服务器对象 app = Flask(__name__) # 解决ajax ...
- 关于 Abp 替换了 DryIoc 框架之后的问题
在之前有些过一篇文章 <使用 DryIoc 替换 Abp 的 DI 框架> ,在该文章里面我尝试通过以替换 IocManager 内部的 IContainer 来实现使用我们自己的 DI ...
- .Net RabbitMQ系列之环境搭建于RabbitMQ基本介绍
本系列主要讲解RabbitMQ在.Net环境下的应用,由于Linux环境下,本人Linux功力有限,所以本系列的RabbitMQ跑在Windows环境中.所以的配置之类都在Windows环境中进行. ...
- sql server 日志文件结构及误操作数据找回
一. 概述 在sql server 里有数据文件.mdf和日志文件.ldf,日志文件是sqlserver数据库的另一个重要组成部分,日志文件记录了所有事务以及每个事务对数据库所做的修改.为了提高数据库 ...
- Android--Service之基础
前言 本篇博客聊一下Android下的Service组件,对于Service组件,有点类似于Windows下的服务.Service是Android四大组件中与Activity最相似的组件,它们的区别在 ...
- 在微信小程序中使用图表
前言:网上有许多的图表库,如:Echarts.Tau Charts.ChartJS等等,具体自行百度. 这次我们使用的是:Echarts 官方教程:点击查看 Echarts下载地址:飞机直达 1.下载 ...