上圖實現的就是當鼠標點擊上方柱體時，在柱體的文字下顯示一個向下的箭頭，這個是通過Echarts的rich屬性
var app = {};
option1 = null;
var a=0;
option1 = {
color: function(params){
debugger
var key = params.dataIndex;
if(key === curInt){
a=params.name;
return '#FDA742'
}else{
return '#31AFF9'
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
height:150,
left: '3%',
right: '4%',
//bottom: '5%',
//containLabel: true
},
xAxis: [
{
type: 'category',
data: legendData,
axisLabel: {
interval: 0,
textStyle: {
},
formatter: function(value) {
debugger
// console.log(value);
var valueDetal = value.split("-").join("");
//console.log(valueDetal);
var ret = ""; //拼接加\n返回的類目項
var maxLength = 6; //每項顯示文字個數
var valLength = valueDetal.length; //X軸類目項的文字個數
// console.log(valLength);
var rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數
if (rowN > 1) { //如果類目項的文字大於3,
for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串
var start = i * maxLength; //開始截取的位置
var end = start + maxLength; //結束截取的位置
//這里也可以加一個是否是最后一行的判斷，但是不加也沒有影響，那就不加吧
temp = valueDetal.substring(start, end) + "\n";
ret += temp; //憑借最終的字符串
}
debugger
if(a==value){
ret=ret+'\n{warnValue|}';
}
return ret;
} else {
return valueDetal;
}
},
rich: {
//這里的rich，下面有解釋
warnValue: {
//這里的warnValue對應上面的標簽名
height: 20,
width:40,
align: 'center',
backgroundColor: {
image: 'img/Jiantou.png' //這個warnImg是上面定義的圖片var warnImg = "img/warn.png";
}
}
}
},
axisTick: {
alignWithLabel: true
},
splitLine:{
show:false
}
}
],
yAxis: [
{
type: 'value',
splitLine:{ //取消橫線
show:false
}
}
],
series: [
{
name: '直接訪問',
type: 'bar',
barWidth: '20%',
data: Data,
itemStyle: {
normal: {
label:{show:true,
position: 'top',//數量顯示位置
color:'black'
}
},
//color: function(params){
// var key = params.dataIndex;
// if(key === curInt){
// return '#FDA742'
//}else{
// return '#31AFF9'
// }
// },
}
}
]
};
;
if (option1 && typeof option1 === "object") {
myChart.setOption(option1);
myChart.on('click', function (params) {
curInt = params.dataIndex;
myChart.setOption(option1);
debugger
var ytmc=params.name;
var legendDataL = [];
var DataL=[];
for(var i in dataMap){
if(dataMap[i].sjmc==ytmc&&dataMap[i].js=="1"){
var sjbh= dataMap[i].sjbh;
for(var j in dataMap){
if(dataMap[j].js=="2"&&(dataMap[j].sjbh).substring(0,8)==sjbh){
legendDataL.push(dataMap[j]["sjmc"]);//下面橫坐標名稱
DataL.push(dataMap[j]["num"]);
}
}
if(sjbh.substring(0,4)=="0001"){
var containerL="containerL1";
showYTXXDetail(legendDataL,DataL,containerL,dwbh);
}else if(sjbh.substring(0,4)=="0002"){
var containerL="containerL2";
showYTXXDetail(legendDataL,DataL,containerL,dwbh);
}else if(sjbh.substring(0,4)=="0003"){
var containerL="containerL3";
showYTXXDetail(legendDataL,DataL,containerL,dwbh);
}else if(sjbh.substring(0,4)=="0004"){
var containerL="containerL4";
showYTXXDetail(legendDataL,DataL,containerL,dwbh);
}
}
}
})
}
})
}