The report module was encountered in the project, and the echart plugin was used for this piece. However, the customer has a special requirement
as shown in the picture below, and the coordinate axis is partially inclined
Let India and the United States turn red for easy handling. There is a corresponding method in echarts, first give the html code that turns red
<!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: 'Total world population',
left: 'center',
subtext: 'Data comes from the network',
// 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(){
// just to simulate async callbacks
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: {
//Here is to make the two names of India and the United States turn red,
color: function(value,index ){
value = value.split(",,")
if(value[1] == 'true'){
return 'red';
}else{
return 'black';
}
},
}
},
data : ['Brazil,,false','Indonesia,,false','United States,,true','India,,true','China,,false','world population (ten thousand),,false']
//data : ['Brazil','Indonesia','aaa','India','China','World population (ten thousand)']
}
],
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>
But there is no way to set partial tilt. Helpless, I can only find the source code and modify it.
You can see it in the function buildAxisLabel(axisBuilder, axisModel, opt) in the source code, 
but after running it, you will see a prompt that fontStyle is undefined, that is, add a point that fontStyle is undefined. 
It doesn't matter, there is no definition, we define it 
so far, complete.
After modifying the source code, you can add the fontStyle that needs to be set, and then give the final html code
<!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: 'Total world population',
left: 'center',
subtext: 'Data comes from the network',
// 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(){
// just to simulate async callbacks
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';
}
},
//Imitate color: function(value,index) here to complete the corresponding function
fontStyle:function(value, index){
value = value.split(",,")
if(value[1] == 'true'){
//return 'red';
return 'italic';
}else{
return 'normal';
//return 'black';
}
}
}
},
data : ['Brazil,,false','Indonesia,,false','United States,,true','India,,true','China,,false','world population (ten thousand),,false']
//data : ['Brazil','Indonesia','aaa','India','China','World population (ten thousand)']
}
],
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>
Also: Attach the modified echart.js