echarts 排名
//柱形图 产品数量
getProductCount() {
let cateList = []
let cateNumList = []
let totalList=[]
this.saleCount = 0
api.groupcatebyarea().then(res => {
console.log(res)
totalList=res
totalList.sort(utils.compare('num'))
totalList.forEach(item => {
this.saleCount += item.num
cateList.unshift(item.name)
cateNumList.unshift(item.num)
})
const myChart = this.$echarts.init(
document.getElementById("productcount-data-chart")
);
let rankIcons = [
require('@/assets/img/rank1.png'),
require('@/assets/img/rank2.png'),
require('@/assets/img/rank3.png'),
require('@/assets/img/rank4.png'),
]
let ydata = cateList
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
x: '90%',
y: '100%',
x2: '70%',
y2: '100%',
},
xAxis: {
show: true,
type: 'value',
splitLine: {
show: false
},
axisLine: { //x轴坐标轴
show: false
},
axisLabel: {
show: false
},
axisTick: { //x轴刻度线
show: false
},
},
yAxis: {
type: 'category',
data: ydata,
// boundaryGap: [0.2, 0.2],
axisLabel: {
margin: 120,
align: "left",
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: "#fff",
},
b: {
color: "#fff",
},
c: {
color: "#fff",
},
d: {
color: "#fff",
},
// 第一名
one: {
color: "white",
width: 20,
height: 16,
backgroundColor: { image: rankIcons[0] },
fontSize: 11,
align: 'center'
},
// 第二名
two: {
color: "white",
width: 20,
height: 16,
backgroundColor: { image: rankIcons[1] },
fontSize: 11,
align: 'center'
},
// 第三名
three: {
color: "white",
width: 20,
height: 16,
backgroundColor: { image: rankIcons[2] },
fontSize: 11,
align: 'center'
},
// 一位数
four: {
color: "white",
width: 20,
height: 16,
backgroundColor: { image: rankIcons[3] },
fontSize: 11,
align: 'center'
},
// 两位数
five: {
color: "white",
width: 20,
height: 16,
backgroundColor: { image: rankIcons[3] },
fontSize: 11,
align: 'center'
}
},
},
axisLine: {
show: false
},
axisTick: {
show: false,
alignWithLabel: true,
},
splitArea: { show: false },
},
series: [{
data: cateNumList,//假数据
type: 'bar',
showBackground: true,
backgroundStyle: {
color: '#0A337E',
borderRadius: 100,
},
barWidth: 6,//柱图宽度
itemStyle: {
normal: {
barBorderRadius: 10,
label: {
show: true, //是否展示
position: ['280', '0'], //在上方显示
textStyle: { //数值样式，显示的文字大小和颜色
fontSize: '10',
color: '#fff'
}
},
color: '#069DFD' //蓝色
}
},
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})
},