| echarts排行榜，类目名字在柱子上方全部显示，前三名序号使用自定义图片背景 | 您所在的位置：网站首页 › 第一名的名称 › echarts排行榜，类目名字在柱子上方全部显示，前三名序号使用自定义图片背景 |
echarts排行榜，类目名字在柱子上方全部显示，前三名序号使用自定义图片背景
|
使用echarts图表开发排行榜时，由于类目轴数据名称过长导致实例展示效果很差，产品要求将类目名称在柱子上方显示，排列序号在柱子左边显示，前三名使用自定义图片。效果如下图所示：
上述效果实现思路： 1、首先配置出类目轴在柱子上方，序号自定义的实例，可以通过左边序号通过yAxis的配置项axisLabel中rich来实现，柱子上方的类目名称通过series的label配置项来实现，具体效果如下：
具体配置项如下： var yData = [ "我是第一名但是我的名字很长", "我是第二名我的名字也很长我是第二名我的名字也很长", "我是第三名我的名字也很长我是第三名我的名字也很长我是第三名我的名字也很长", "我是第四名我的名字也很长我是第四名我的名字也很长我是第四名我的名字也很长", "我是第五名我的名字也很长我是第五名我的名字也很长我是第五名我的名字也很长", ]; var seriesData = [300, 289, 276, 250, 230]; option = { tooltip: { trigger: "item", formatter: (p) => { if (p.seriesName === "total") { return ""; } return `${p.name}访问量: ${p.value}`; }, }, legend: { show: false, }, grid: { left: 50, top: 36, right: 50, }, xAxis: { type: "value", name: "访问量/次", nameLocation: "end", nameTextStyle: { fontSize: 14, color: "#666666", padding: [60, 0, 0, -65], }, splitLine: { show: false, }, axisLabel: { show: true, color: "#555555", }, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: "#e2e4e8", }, }, }, yAxis: [ { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisPointer: { label: { show: false, margin: 30, }, }, data: yData, axisLabel: { margin: 40, fontSize: 14, align: "left", color: "#333", // 配置序号背景 rich: { a1: { color: "#fff", backgroundColor: { image: "C:/Users/user/Desktop/icon/icon-first.png", }, width: 30, height: 30, align: "center", borderRadius: 2, }, a2: { color: "#fff", backgroundColor: { image: "C:/Users/user/Desktop/icon/icon-second.png", }, width: 30, height: 30, align: "center", borderRadius: 2, }, a3: { color: "#fff", backgroundColor: { image: "C:/Users/user/Desktop/icon/icon-third.png", }, width: 30, height: 30, align: "center", borderRadius: 2, }, b: { color: "#fff", backgroundColor: "#9ec6fe", width: 30, height: 30, lineHeight: 30, align: "center", verticalAlign: "middle", borderRadius: 15, }, }, formatter: function (params, index) { var leftIndex = index + 1; if (leftIndex < 4) { return ["{a" + leftIndex + "|" + leftIndex + "}" + " "].join( "\n" ); } else { return ["{b|" + leftIndex + "}" + " "].join("\n"); } }, }, }, ], series: [ { name: "value", type: "bar", barWidth: 20, legendHoverLink: false, data: seriesData, itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: "#1595f8", // 0% 处的颜色 }, { offset: 1, color: "#51eff9", // 100% 处的颜色 }, ], }, barBorderRadius: [0, 10, 10, 0], }, // 配置柱子上方类目轴名字 label: { show: true, position: [0, "-15px"], color: "#555", fontSize: 14, offset: [0, 0], formatter: function (a) { return `${a.name}`; }, }, }, ], };2、 对比上述效果图和最终效果图，可以发现只需要让柱子后面显示出具体数组就可实现最终效果。由于series的label不能配置成多个，可以通过再配置一个排行榜实例，这个实例只显示柱子和柱子后面的数量，然后将第一个实例的series的barGap配置项设置为"-100%"，使两个图例完成重合，然后设置第一个实例的zlevel为1，第二个实例的zlevel为2即可。最终配置项如下： var yData = [ "我是第一名但是我的名字很长", "我是第二名我的名字也很长我是第二名我的名字也很长", "我是第三名我的名字也很长我是第三名我的名字也很长我是第三名我的名字也很长", "我是第四名我的名字也很长我是第四名我的名字也很长我是第四名我的名字也很长", "我是第五名我的名字也很长我是第五名我的名字也很长我是第五名我的名字也很长", ]; var seriesData = [300, 289, 276, 250, 230]; option = { tooltip: { trigger: "item", formatter: (p) => { if (p.seriesName === "total") { return ""; } return `${p.name}访问量: ${p.value}`; }, }, legend: { show: false, }, grid: { left: 50, top: 36, right: 50, }, xAxis: { type: "value", name: "访问量/次", nameLocation: "end", nameTextStyle: { fontSize: 14, color: "#666666", padding: [60, 0, 0, -65], }, splitLine: { show: false, }, axisLabel: { show: true, color: "#555555", }, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: "#e2e4e8", }, }, }, yAxis: [ { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisPointer: { label: { show: false, margin: 30, }, }, data: yData, axisLabel: { margin: 40, fontSize: 14, align: "left", color: "#333", // 配置序号背景 rich: { a1: { color: "#fff", backgroundColor: { image: "C:/Users/user/Desktop/icon/icon-first.png", }, width: 30, height: 30, align: "center", borderRadius: 2, }, a2: { color: "#fff", backgroundColor: { image: "C:/Users/user/Desktop/icon/icon-second.png", }, width: 30, height: 30, align: "center", borderRadius: 2, }, a3: { color: "#fff", backgroundColor: { image: "C:/Users/user/Desktop/icon/icon-third.png", }, width: 30, height: 30, align: "center", borderRadius: 2, }, b: { color: "#fff", backgroundColor: "#9ec6fe", width: 30, height: 30, lineHeight: 30, align: "center", verticalAlign: "middle", borderRadius: 15, }, }, formatter: function (params, index) { var leftIndex = index + 1; if (leftIndex < 4) { return ["{a" + leftIndex + "|" + leftIndex + "}" + " "].join( "\n" ); } else { return ["{b|" + leftIndex + "}" + " "].join("\n"); } }, }, }, { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisPointer: { label: { show: false, inside: false, }, }, data: yData, axisLabel: { show: false, }, }, ], series: [ { zlevel: 1, name: "value", type: "bar", barGap: "-100%", barWidth: 20, legendHoverLink: false, data: seriesData, itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: "#1595f8", // 0% 处的颜色 }, { offset: 1, color: "#51eff9", // 100% 处的颜色 }, ], }, barBorderRadius: [0, 10, 10, 0], }, // 配置柱子上方类目轴名字 label: { show: true, position: [0, "-15px"], color: "#555", fontSize: 14, offset: [0, 0], formatter: function (a) { return `${a.name}`; }, }, }, { zlevel: 2, name: "访问量", type: "bar", barWidth: 20, data: seriesData, itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: "#1595f8", // 0% 处的颜色 }, { offset: 1, color: "#51eff9", // 100% 处的颜色 }, ], }, barBorderRadius: [0, 10, 10, 0], }, label: { show: true, position: "right", color: "#39caf9", fontSize: 14, offset: [10, 1], }, }, ], };
|
【本文地址】
公司简介
联系我们