chartBar2_industry: function (docm) {
let self = this;
let myColors = ["#008ce3", "#06d7de"];
let fontColors = ["#43eee8", "#ab9700"];
let chartsInfo = self.industry;
let seriesData = [];
for (let i = 0; i < chartsInfo.names.length; i++) {
let data = {
name: chartsInfo.names[i],
color: myColors[i],
data: chartsInfo.value[i],
dataLabels: {
style: {
color: fontColors[i]
}
}
};
seriesData.push(data);
}
this.chartBar2Industry = Highcharts.chart(docm, {
chart: {
type: 'bar',
backgroundColor: null,
spacing: [10, 10, 10, 10]
},
// colors: myColors,
title: {
text: ''
},
tooltip: {
// pointFormat: '<span style="color:{point.color}">\u25CF</span>{series.name}: <b>{point.y}</b><br/>' // 默认
},
legend: {
align: "center",
itemMarginBottom: 0,
itemStyle: {
color: "#fff",
fontWeight: "400",
fontSize: 12
},
itemHoverStyle: {
color: "#fff"
},
squareSymbol: false,
symbolRadius: 0,
symbolWidth: 20
},
xAxis: {
reversed: true,
gridLineWidth: 0,
lineColor: "#21658a",
categories: chartsInfo.categories,
labels: {
style: {
color: "#a9b0ba",
fontSize: 10
},
autoRotation: false,
useHTML: true,
formatter: function () {
// return '<a href="' + categoryLinks[this.value] + '">' +
// this.value + '</a>';
// 获取到刻度值
let labelVal = this.value;
// 实际返回的刻度值
let reallyVal = labelVal;
// 判断刻度值的长度
if (labelVal.length > 6) {
// 截取刻度值
reallyVal = labelVal.substr(0, 6) + "<br/>" + labelVal.substring(6, labelVal.length - 1);
}
return reallyVal;
}
}
},
yAxis: {
title: {
text: ''
},
gridLineColor: "#21658a",
lineColor: "#21658a",
lineWidth: 1,
labels: {
style: {
color: "#a9b0ba",
fontSize: 10
}
}
},
plotOptions: {
bar: {
dataLabels: {
allowOverlap: true,
enabled: true,
// distance: -70,
style: {
textOutline: "0px 0px contrast",
color: "#fff",
fontSize: 10
},
format: '{y}'
}
},
series: {
// colorByPoint: true,
showInLegend: true,
borderWidth: 0,
pointWidth: 6
}
},
series: seriesData
});
},
Highchart实现条状图bar 1
最新推荐文章于 2022-03-22 16:31:39 发布