在项目中遇到了报表的模块，针对这一块使用了echart 插件。但是在客户有一个特殊需求
如下的图片，坐标轴部分倾斜
让上图 印度和美国变成红色好处理，echarts中有对应方法，先给出变红色的html代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style>
#toolTipContent{
overflow: auto;
overflow-x: hidden;
white-space: normal !important;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" >
var colorList = [
'#DC143C','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
$(function () {
option = {
title : {
text: '世界人口总量',
left: 'center',
subtext: '数据来自网络',
//textAlign: 'center',
//textBaseline:'middle',
},
tooltip : {
trigger: 'item',
borderColor : '#FFFFFF',
backgroundColor:'#FFFFFF',
textStyle: {
color: '#000',
},
borderColor: '#FF0000',
borderWidth: 1,
enterable: true,
triggerOn: 'click',
position:function(point, params, dom, size,){
dom.style.borderColor = params.color;
return [point[0], point[1]];
},
formatter: function(params,ticket,callback) {
var res = 'Function formatter : <br/>' + params.seriesName + ' '+ params.name+' ' + params.data;
res += '<br/>'+'This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. '
//document.getElementById('toolTipsDiv').innerHTML = res;
$("#toolTipContent").html(res);
var toolTips = document.getElementById('toolTipsDiv').innerHTML;
//toolTips = toolTips.tostring();
setTimeout(function(){
// 仅为了模拟异步回调
callback(ticket, toolTips);
}, 0)
return 'loading';
}
},
legend: {
show: false,
},
toolbox: {
show : false,
},
calculable : true,
xAxis : [
{
type : 'value',
axisLabel: {
formatter: function (value, index) {
if (index == 0) {
return '';
}
return value;
}
},
min:-1,
max:4,
}
],
yAxis : [
{
type : 'category',
axisLine: {
onZero: false
},
axisLabel: {
formatter: function (value, index) {
value = value.split(",,");
return value[0];
//var myValue = '\<i\>'+value[0]+'\</i\>';
//return myValue;
},
textStyle: {
//此处就是让印度，美国两个名称变成红色，
color: function(value,index ){
value = value.split(",,")
if(value[1] == 'true'){
return 'red';
}else{
return 'black';
}
},
}
},
data : ['巴西,,false','印尼,,false','美国,,true','印度,,true','中国,,false','世界人口(万),,false']
//data : ['巴西','印尼','aaa','印度','中国','世界人口(万)']
}
],
series : [
{
name:'2011年',
type:'bar',
barGap: 0,
markPoint: {
label: {
normal: {
formatter : function(){
var aa = ""
}
},
},
},
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
if(params.data == 2){
return colorList[1];
}else{
return colorList[2];
}
},
}
},
data:[0, 2, 4, 2, 2, 3]
},
{
name:'2012年',
type:'bar',
barGap: 0,
data:[3, 1, 2, 2, 3, 2]
}
]
};
var contant = echarts.init(document.getElementById('container'))
contant.setOption(option);
});
</script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<div id="toolTipsDiv" style="width:200px;height:200px">
<div id="toolTipContent" style="width:200px;height:200px"> </div>
</div>
<div id="yLable" style="font-size: 15px">
</div>
</body>
</html>
但是没有设置部分倾斜的方法。无奈只能找源码，进行修改。
在源码中的 function buildAxisLabel(axisBuilder, axisModel, opt) 这个function中可以看到
但是运行后你会看到提示fontStyle 未定义，就是自己加点这个fontStyle未定义。
没关系，没定义，我们定义就是了
至此，完成。
修改完源码后在加入需要设置的fontStyle即可，再给出，最终的html代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style>
#toolTipContent{
overflow: auto;
overflow-x: hidden;
white-space: normal !important;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" >
var colorList = [
'#DC143C','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
$(function () {
option = {
title : {
text: '世界人口总量',
left: 'center',
subtext: '数据来自网络',
//textAlign: 'center',
//textBaseline:'middle',
},
tooltip : {
trigger: 'item',
borderColor : '#FFFFFF',
backgroundColor:'#FFFFFF',
textStyle: {
color: '#000',
},
borderColor: '#FF0000',
borderWidth: 1,
enterable: true,
triggerOn: 'click',
position:function(point, params, dom, size,){
dom.style.borderColor = params.color;
return [point[0], point[1]];
},
formatter: function(params,ticket,callback) {
var res = 'Function formatter : <br/>' + params.seriesName + ' '+ params.name+' ' + params.data;
res += '<br/>'+'This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. '
//document.getElementById('toolTipsDiv').innerHTML = res;
$("#toolTipContent").html(res);
var toolTips = document.getElementById('toolTipsDiv').innerHTML;
//toolTips = toolTips.tostring();
setTimeout(function(){
// 仅为了模拟异步回调
callback(ticket, toolTips);
}, 0)
return 'loading';
}
},
legend: {
show: false,
},
toolbox: {
show : false,
},
calculable : true,
xAxis : [
{
type : 'value',
axisLabel: {
formatter: function (value, index) {
if (index == 0) {
return '';
}
return value;
}
},
min:-1,
max:4,
}
],
yAxis : [
{
type : 'category',
axisLine: {
onZero: false
},
axisLabel: {
formatter: function (value, index) {
value = value.split(",,");
return value[0];
//var myValue = '\<i\>'+value[0]+'\</i\>';
//return myValue;
},
textStyle: {
color: function(value,index ){
value = value.split(",,")
if(value[1] == 'true'){
return 'red';
}else{
return 'black';
}
},
//此处仿照 color: function(value,index )，完成相应的功能
fontStyle:function(value, index){
value = value.split(",,")
if(value[1] == 'true'){
//return 'red';
return 'italic';
}else{
return 'normal';
//return 'black';
}
}
}
},
data : ['巴西,,false','印尼,,false','美国,,true','印度,,true','中国,,false','世界人口(万),,false']
//data : ['巴西','印尼','aaa','印度','中国','世界人口(万)']
}
],
series : [
{
name:'2011年',
type:'bar',
barGap: 0,
markPoint: {
label: {
normal: {
formatter : function(){
var aa = ""
}
},
},
},
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
if(params.data == 2){
return colorList[1];
}else{
return colorList[2];
}
},
}
},
data:[0, 2, 4, 2, 2, 3]
},
{
name:'2012年',
type:'bar',
barGap: 0,
data:[3, 1, 2, 2, 3, 2]
}
]
};
var contant = echarts.init(document.getElementById('container'))
contant.setOption(option);
});
</script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<div id="toolTipsDiv" style="width:200px;height:200px">
<div id="toolTipContent" style="width:200px;height:200px"> </div>
</div>
<div id="yLable" style="font-size: 15px">
</div>
</body>
</html>
另 ：附上修改后的echart.js
相关推荐
写论文时，图表线条及坐标轴的修饰是很麻烦的，本程序可以解决常用的修饰问题。最后保存图片。
在某些复杂的数据分析场景中，我们可能需要在一个图表中同时展示不同单位的数据，比如时间序列与价格数据，这时就需要利用 ECharts 提供的多维坐标轴功能。本文将详细讲解如何在 ECharts 中实现多维坐标轴，并通过...
在C#编程中，绘制坐标轴是创建图形用户界面（GUI）或数据分析应用时常见的需求。这涉及到在窗口上画出X轴和Y轴，通常用于表示数据的二维分布。以下将详细介绍C#中如何实现这个功能，并提供相关知识点。 首先，C#中...
除了上述提到的调整方法，ggplot2还允许开发者通过主题（theme）函数自定义更多关于坐标轴的显示细节，包括坐标轴线的颜色、粗细、类型，坐标轴标签的位置、旋转角度、字体、大小等。通过组合这些函数和参数，可以...
在Python的可视化库Matplotlib中，绘制图形时，坐标轴和刻度的设置是至关重要的，它们能够清晰地展示数据的分布和趋势。本篇文章主要总结了如何使用Matplotlib进行坐标轴与刻度的定制。 首先，我们导入必要的库，...
在Qt编程中，"Qt绘制坐标轴"是一个关键的领域，尤其对于开发涉及图形用户界面（GUI）的应用程序，如数据分析、科学可视化或工程软件。这个主题涉及到如何使用Qt的图形视图框架（Graphics View Framework）来创建...
坐标轴刻度取值算法完整代码，生成比较优雅和人性化的刻度。
在Excel中，调整横纵坐标轴的交叉位置是一项重要的技能，尤其在制作图表时，能够帮助我们更好地展示数据。本文由白玉英（北京信息职业技术学院）撰写，旨在教导用户如何自定义坐标轴的交叉点，以避免标签与数据系列...
echart全国城市坐标，json数据："上海":[121.48,31.22],"嘉定":[121.24,31.4]
ECharts 是一个基于 JavaScript 的开源可视化库，广泛...通过对比修改前后的代码，你可以找出与时间轴配置相关的部分，并按照上述建议进行调整。如果遇到具体问题，可以查看 ECharts 的官方文档或在线社区寻求帮助。
matlab gui开发 将坐标轴中显示的图保存（包含坐标轴、图例）
在文件"实时曲线1"中，很可能包含了实现这一功能的VB代码示例，包括数据的获取、坐标轴范围的管理、曲线的绘制和刷新等关键部分。通过学习和分析这个代码，开发者可以更好地理解和实现动态实时曲线及坐标轴压缩变换...
首先，MPChart支持多种坐标轴，包括X轴（Horizontal Axis）和Y轴（Vertical Axis）。X轴通常用于表示数据的类别或者时间序列，而Y轴则用于展示数值的大小。MPChart允许开发者自定义坐标轴的显示方式，如刻度、标签、...
在QML（Qt Quick）中，创建可视化应用时，经常需要展示数据，这通常涉及到坐标轴和曲线的绘制。QmlQAxis这个主题是关于如何在QML中实现坐标轴以及动态添加曲线的过程，这对于数据可视化的应用尤其重要。下面我们将...
在开发绘图软件时，坐标轴的范围和刻度设定是一项关键任务，它直接影响到图形的清晰度和用户的阅读体验。本压缩包提供了一系列的坐标轴范围刻度确定算法，这些算法旨在帮助开发者自适应地计算和设置合适的坐标范围及...
VBA 图表Y坐标轴会自动改变,自动修改内部坐标轴,及颜色,形状等等.
本篇文章将详细讨论如何使用C#编程语言结合GDI+库来实现自动绘制坐标轴的工具，以及涉及到的关键知识点。 首先，我们要理解GDI+是什么。GDI+是微软Windows操作系统中的一个图形设备接口，它提供了丰富的图形绘制...
在C#编程环境中，坐标轴绘图处理是一项关键任务，特别是在数据可视化和图形用户界面（GUI）开发中。本工程专注于实现这一功能，提供了一个高度封装的解决方案，以支持二次开发和未来的系统升级。让我们深入探讨一下...
unity 三维坐标轴渲染插件