echarts之含百分⽐的横向柱状图需求：
⿏标移⼊：
1、容器：
<div id="bar" ></div>
2、在methods中
methods:{
bar(){
function contains(arr, dst){
var i = arr.length;
while((i -=1)){
if(arr[i]== dst){
return i;
}
}
return false;
}
var getname =[
"环境艺术设计",
"⼯程造价",
"汽车电⼦技术",
"⼯程监理",
"机械制造",fontweight属性bold
"计算机应⽤技术",
"数控技术",
"计算机⽹络技术",
"计算机⽹络技术",
];
var getvalue =[20,182,191,234,290,330,310,234];
// 计算百分⽐
function jisuan(arr){
// 总和
var sum = duce(function(prev, cur, index, array){
return prev + cur;
});
// 百分⽐
let arrPercent =[];
for(let i =0, len = arr.length; i < len; i++){
arrPercent.push(((arr[i]/ sum)*100).toFixed(2));
}
return arrPercent;
}
let arr =jisuan(getvalue);
let option ={
// backgroundColor: "#000",
grid:{
top:"2%",//上边距
bottom:"2%",//下边距
right:"2%",//右边距
left:"2%",//左边距
containLabel:true,//包含标签
},
tooltip:{
trigger:"axis",
textStyle:{
fontWeight:"bolder",
fontSize:20,
fontFamily:"SourceHanSansCN",
},
formatter:function(params){
return(
'<span >'+
params[0].name +
"件数："+
params[0].value
.toString()
.replace(/(\d)(?=(?:\d{3}[+]?)+$)/g,"$1,")+
"件</span>"
);
},
axisPointer:{
type:"shadow",
},
},
xAxis:[
{
show:false,
},
],
yAxis:[
{
// inverse: true, //让y轴标签正过来
data: getname,
axisLabel:{
color:"#A0B2D3",
textStyle:{
fontWeight:"bolder",
fontSize:16,
},
interval:0,//可以设置成 0 强制显⽰所有标签。
formatter:function(value, index){
formatter:function(value, index){
// index = contains(getname, value) + 1;
return[
"{a|"+ value +"}  "+"{b|"+ arr[index]+"%"+"}",
].join("");
},
rich:{
b:{
width:60,
align:"right",
fontFamily:"BoldCondensed",
fontWeight:"bolder",
fontSize:16,
},
},
},
axisLine:{
show:false,
},
axisTick:{
show:false,
},
},
{
type:"category",
// inverse: true,
axisTick:"none",
axisLine:"none",
show:true,
axisLabel:{
// align: "right",
textStyle:{
color:"#A0B2D3",
fontFamily:"BoldCondensed",
fontWeight:"bolder",
fontSize:16,
},
interval:0,//可以设置成 0 强制显⽰所有标签。
formatter:function(value, index){
return["{a|"+ value +"}  "+"{b|"+"(件)"+"}"].join("");
},
rich:{
a:{
width:30,
align:"left",
fontFamily:"BoldCondensed",
fontWeight:"bolder",
fontSize:16,
},
},
},
data: getvalue,
},
],
animation:false,
series:[
{
type:"bar",
data: getvalue,
// barWidth: 12,
itemStyle:{
normal:{
color:["#4F9EFD"],
},
},
// 背景颜⾊
// 背景颜⾊
showBackground:true,
backgroundStyle:{
color:["#040F1C"],
},
},
],
};
let myChart =this.$echarts.ElementById("bar"));      myChart.setOption(option);
window.addEventListener("resize",function(){
});
},
}
3、在mounted中调⽤
mounted(){
this.bar();
},
以上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。