echarts实现排名柱状图的示例代码
作者：小小•愿望
在ECharts中,可以通过设置数据的顺序来控制柱状图的排序,本文就介绍了echarts实现排名柱状图的示例代码,具有一定的参考价值,感兴趣的可以了解一下
通过echarts实现排名柱状图，效果图如下，下方是完整代码，可以直接在echarts示例中运行。在线运行
在echarts中想要实现个性化的label，通常会在 formatter 中实现，但是要想有颜色或背景色就不能用 div 了，这个时候就要借助 rich 了，首先需要在 rich 中定义变量，如例子中的 one，可以随便定义，只要在 formatter 中使用一样的名字就行，一定要有 "|" ,不然不会被解析，更多可移步官方富文本标签。
let ydata = ['上海', '北京', '深圳', '天津', '河南', '新疆', '澳门'];
let xdata = [12, 13, 14, 15, 16, 17, 18];
option = {
tooltip: {
trigger: "axis",
},
grid: {
left: "80",
right: "20",
bottom: "20",
top: "20",
containLabel: false,
},
xAxis: {
type: "value",
show: false,
},
yAxis: {
type: "category",
data: ydata,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
margin: 70,
width: 60,
align: "left",
overflow: "truncate",
formatter: function (value, index) {
let ind = index + 1;
if (ind == ydata.length) {
return "{one|" + (ydata.length - index) + "} {a|" + value + "}";
} else if (ind + 1 == ydata.length) {
return "{two|" + (ydata.length - index) + "} {b|" + value + "}";
} else if (ind + 2 == ydata.length) {
return (
"{three|" + (ydata.length - index) + "} {c|" + value + "}"
);
}
if (ydata.length - index > 9) {
return (
"{five|" + (ydata.length - index) + "} {d|" + value + "}"
);
}
return "{four|" + (ydata.length - index) + "} {d|" + value + "}";
},
rich: {
a: {
color: "#59c9f9",
},
b: {
color: "#59c9f9",
},
c: {
color: "#59c9f9",
},
d: {
color: "#59c9f9",
},
// 第一名
one: {
backgroundColor: "#E86452",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11,
},
// 第二名
two: {
backgroundColor: "#FF9845",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11,
},
// 第三名
three: {
backgroundColor: "#F6BD16",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11,
},
// 一位数
four: {
backgroundColor: "rgba(0,0,0,0.15)",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11,
},
// 两位数
five: {
backgroundColor: "rgba(0,0,0,0.15)",
color: "white",
width: 16,
height: 16,
padding: [1, 0, 0, 1],
borderRadius: 10,
fontSize: 11,
},
},
},
},
series: [{
type: "bar",
showBackground: true,
label: {
show: true,
position: "right",
color: "rgba(0,0,0,0.45)",
},
barWidth: 20,
itemStyle: {
color: "#5B8FF9",
},
data: xdata,
}, ],
};到此这篇关于echarts实现排名柱状图的示例代码的文章就介绍到这了,更多相关echarts 排名柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！