Echarts自定义横向柱状图中单条bar的样式

需要解决的样式难点，柱条渐变色，末端白色矩形，以及每条柱的百分比。

<template><div class="panel-wrapper"><header>各网格完成率</header><Echart :options="options" width="100%" height="344px" /></div>
</template><script>
import Echart from "@/common/echart";
export default {components: {Echart,},data() {return {options: {grid: {left: 80,top: 30,bottom: 0,right: 100,},xAxis: {show: false,type: "value",},yAxis: {type: "category",data: ["第一网格","第二网格","第三网格","第四网格","第五网格","第六网格","第七网格","第八网格",],axisLine: {show: false, // 去掉 y 轴的线},axisLabel: {color: "#C3E7FF", // 文字颜色fontSize: 14, // 文字大小},},series: [{type: "bar",barWidth: 11,itemStyle: {color: {type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 1,color: "#78B6F3",},{offset: 0,color: "rgba(17, 70, 124, 0)",},],},},// label: {//   show: true,//   position: "right", // 在柱条右端显示//   formatter: "{c}%", // {c} 代表数值，拼接百分号//   color: "#C3E7FF",//   fontSize: 14,// },data: [11, 12, 3, 4, 5, 6, 7, 10],},{name: "右端矩形",type: "custom",renderItem: function (params, api) {// 横向：value 在 x 轴，category 在 y 轴const categoryIndex = api.value(0); // 类目索引const barValue = api.value(1); // 数值// 转成像素坐标const endCoord = api.coord([barValue, categoryIndex]);const x = endCoord[0];const y = endCoord[1];const rectWidth = 5; // 矩形宽度const rectHeight = 15; // 与柱条一样高（或者小点）return {type: "rect",shape: {x: x,y: y - rectHeight / 2,width: rectWidth,height: rectHeight,},style: {fill: "#FFF", // 矩形颜色},};},encode: {x: 1, // 第1个维度 = 数值 → x轴y: 0, // 第0个维度 = 类目 → y轴},data: [["第一网格", 11],["第二网格", 12],["第三网格", 3],["第四网格", 4],["第五网格", 5],["第六网格", 6],["第七网格", 7],["第八网格", 10],],},{// 自定义右侧标签type: "custom",renderItem: function (params, api) {const categoryIndex = params.dataIndex;const value = api.value(1);// 计算标签位置（图表最右侧）const point = api.coord([100, categoryIndex]);return {type: "text",position: [params.coordSys.width + 150, point[1] - 7],style: {text: value + "%",fill: "#fff",fontSize: 18,textAlign: "right",fontWeight: "bold",},z2: 100,};},data: [["第一网格", 11],["第二网格", 12],["第三网格", 3],["第四网格", 4],["第五网格", 5],["第六网格", 6],["第七网格", 7],["第八网格", 10],],z: 3,},],},};},
};
</script><style lang="scss" scoped>
.panel-wrapper {header {background-image: url("./images/i17.png");height: 50px;background-position: center;background-size: 100% auto;background-repeat: no-repeat;color: #fff;// font-family: YouSheBiaoTiHei;font-size: 18px;line-height: 50px;box-sizing: border-box;padding-left: 36px;text-shadow: 0px 1.82px 4.54px rgba(0, 0, 0, 0.3);}
}
</style>

options是图例的配置项。