在可视化开发中通常会遇到带排名的柱状图,要求前三条数据分别显示不同颜色,其余数据显示同一颜色,如下图所示
1. 配置柱状图颜色
- 定义柱状图渐变颜色数组 barColor
- 定义放置数据及样式的数组 studentsBarData
- 循环数据数组studentsData.seriesData,将前三位的itemStyle.color设置为渐变颜色数组前三位
- 将循环的数据与添加的样式push到空数组studentsBarData中
- 设置数据series[0].data : studentsBarData
let barColor = [
{
colorStops: [
{
offset: 0,
color: "rgba(254, 205, 77, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(254, 205, 77, 1)", // 100% 处的颜色
},
],
},
{
colorStops: [
{
offset: 0,
color: "rgba(205, 245, 246, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(205, 245, 246, 1)", // 100% 处的颜色
},
],
},
{
colorStops: [
{
offset: 0,
color: "rgba(255, 195, 178, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255, 195, 178, 1)", // 100% 处的颜色
},
],
},
{
colorStops: [
{
offset: 0,
color: "rgba(32, 196, 255, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(32, 196, 255, 1)", // 100% 处的颜色
},
],
},
];
let studentsBarData = [];
this.studentsData.seriesData.forEach((item, i) => {
let itemStyle = {
color: i > 3 ? barColor [3] : barColor [i],
};
studentsBarData.push({
value: item,
itemStyle: itemStyle,
});
});
2. 配置y轴label文字颜色、配置柱状图末尾label文字颜色样式
- 定义颜色列表colorList
- yAxis[0]配置y轴坐标文字及样式
- yAxis[1]配置柱状图后具体数值文字及样式
let colorList = ["#FECD4D", "#CDF5F6", "#FFC3B2", "#20C4FF"];
let options = {
//...其余配置
yAxis: [
{
type: "category",
inverse: true,//默认y轴是反转的,使用inverse=true调转
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: true,
margin: 30,
},
},
data: this.studentsData.xAxisData,
axisLabel: {
margin: 70,
fontSize: 12,
align: "left",
interval: 0,
color: "#fff",
rich: {
//自定义富文本样式
a1: {
color: colorList[0],
width: 20,
height: 20,
align: "center",
fontSize: 14,
borderRadius: 2,
borderColor: "rgba(71, 202, 255, 0.50)",
borderWidth: 2,
shadowColor: "rgba(71, 202, 255, 0.50)",
shadowBlur: 10,
},
a2: {
color: colorList[1],
width: 20,
height: 20,
align: "center",
fontSize: 14,
borderRadius: 2,
borderColor: "rgba(71, 202, 255, 0.50)",
borderWidth: 2,
shadowColor: "rgba(71, 202, 255, 0.50)",
shadowBlur: 10,
},
a3: {
color: colorList[2],
width: 20,
height: 20,
align: "center",
fontSize: 14,
borderRadius: 2,
borderColor: "rgba(71, 202, 255, 0.50)",
borderWidth: 2,
shadowColor: "rgba(71, 202, 255, 0.50)",
shadowBlur: 10,
},
b: {
color: colorList[3],
width: 20,
height: 20,
align: "center",
fontSize: 14,
lineHeight: 20,
borderRadius: 2,
borderColor: "rgba(71, 202, 255, 0.50)",
borderWidth: 2,
shadowColor: "rgba(71, 202, 255, 0.50)",
shadowBlur: 10,
},
},
formatter: (params) => {
var index = this.studentsData.xAxisData.indexOf(params);
index = index + 1;
if (index - 1 < 3) {
return [
"{a" + index + "|" + index + "}" + " " + params,
].join("\n");
} else {
return ["{b|" + index + "}" + " " + params].join("\n");
}
},
},
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
data: this.studentsData.seriesData,
axisLabel: {
show: true,
fontSize: 14,
fontWeight:900,
color: (value, index) => colorList[index < 3 ? index : 3],//改变柱状图末尾label文字颜色
formatter: "{value}",
},
}
],
}
3. 初始化排名柱状图echarts代码片段总结
initStudentsCharts() {
this.students = this.$echarts.init(this.$refs.students);
let colorList = ["#FECD4D", "#CDF5F6", "#FFC3B2", "#20C4FF"];
let data1 = []//设置背景柱状图数据
for (var i = this.studentsData.seriesData.length - 1; i >= 0; i--) {
data1.push(Math.max.apply(null,this.studentsData.seriesData) * 1.2);
};
let barColor = [
{
colorStops: [
{
offset: 0,
color: "rgba(254, 205, 77, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(254, 205, 77, 1)", // 100% 处的颜色
},
],
},
{
colorStops: [
{
offset: 0,
color: "rgba(205, 245, 246, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(205, 245, 246, 1)", // 100% 处的颜色
},
],
},
{
colorStops: [
{
offset: 0,
color: "rgba(255, 195, 178, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255, 195, 178, 1)", // 100% 处的颜色
},
],
},
{
colorStops: [
{
offset: 0,
color: "rgba(32, 196, 255, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(32, 196, 255, 1)", // 100% 处的颜色
},
],
},
];
let studentsBarData = [];
this.studentsData.seriesData.forEach((item, i) => {
let itemStyle = {
color: i > 3 ? barColor[3] : barColor[i],
};
studentsBarData.push({
value: item,
itemStyle: itemStyle,
});
});
let options = {
legend: {
show: false,
},
grid: {
left: "-10%",
right: "3%",
bottom: "0%",
top: "0%",
containLabel: true,
},
xAxis: {
show: false,
type: "value",
},
yAxis: [
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: true,
margin: 30,
},
},
data: this.studentsData.xAxisData,
axisLabel: {
margin: 70,
fontSize: 12,
align: "left",
interval: 0,
color: "#fff",
rich: {
a1: {
color: colorList[0],
width: 20,
height: 20,
align: "center",
fontSize: 14,
borderRadius: 2,
borderColor: "rgba(71, 202, 255, 0.50)",
borderWidth: 2,
shadowColor: "rgba(71, 202, 255, 0.50)",
shadowBlur: 10,
},
a2: {
color: colorList[1],
width: 20,
height: 20,
align: "center",
fontSize: 14,
borderRadius: 2,
borderColor: "rgba(71, 202, 255, 0.50)",
borderWidth: 2,
shadowColor: "rgba(71, 202, 255, 0.50)",
shadowBlur: 10,
},
a3: {
color: colorList[2],
width: 20,
height: 20,
align: "center",
fontSize: 14,
borderRadius: 2,
borderColor: "rgba(71, 202, 255, 0.50)",
borderWidth: 2,
shadowColor: "rgba(71, 202, 255, 0.50)",
shadowBlur: 10,
},
b: {
color: colorList[3],
width: 20,
height: 20,
align: "center",
fontSize: 14,
lineHeight: 20,
borderRadius: 2,
borderColor: "rgba(71, 202, 255, 0.50)",
borderWidth: 2,
shadowColor: "rgba(71, 202, 255, 0.50)",
shadowBlur: 10,
},
},
formatter: (params) => {
var index = this.studentsData.xAxisData.indexOf(params);
index = index + 1;
if (index - 1 < 3) {
return [
"{a" + index + "|" + index + "}" + " " + params,
].join("\n");
} else {
return ["{b|" + index + "}" + " " + params].join("\n");
}
},
},
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
data: this.studentsData.seriesData,
axisLabel: {
show: true,
fontSize: 14,
fontWeight:900,
color: (value, index) => colorList[index < 3 ? index : 3],//改变柱状图末尾label文字颜色
formatter: "{value}",
},
},
],
series: [
{
z: 2,
name: "value",
type: "bar",
barWidth: 10,
zlevel: 1,
data: studentsBarData,
label: {
show: false,
position: "right",
color: "#fff",
fontSize: 14,
offset: [10, 0],
},
},
{
name: "背景",
type: "bar",
barWidth: 10,
barGap: "-100%",
itemStyle: {
normal: {
color: "rgba(21, 132, 185, 0.18)",
},
},
data: data1,
},
],
};
this.students.setOption(options);
// 当浏览器宽度改变的时候,图表的大小也跟着改变
window.onresize = () => {
this.students.resize();
};
},