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();
                });
            })


        },