vue+echarts 排名

main.js
import * as echarts from 'echarts'

dome
 getInitTwo() {
            var ss = document.getElementById("echartIdone")
            var myEcharts = this.$echarts.init(ss)
            let colorList = ['rgba(0,255,224, 1)', 'rgba(0,255,224, 1)', 'rgba(0,255,224, 1)', 'rgba(0,255,224, 1)', 'rgba(0,255,224, 1)', 'rgba(0,255,224, 1)', 'rgba(0,255,224, 1)', 'rgba(0,255,224, 1)']
            let result = [
                { name: '基地5', value: 580 },
                { name: '基地1', value: 536 },
                { name: '基地2', value: 500 },
                { name: '基地3', value: 350 },
                { name: '基地4', value: 300 },
                { name: '基地8', value: 280 },
                { name: '基地6', value: 240 },
                { name: '基地7', value: 200 },
            ]
            let icons1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAATCAYAAABsmQZ/AAAB50lEQVRIibXWTUsbQRgH8P8uS022idlE6Voj8aUabaWl9NCLwR4kHjYIHhRB6DcR1M/RUxGKoHiRCbR7KcF6EKlgq42mkcYSVEzixpfE1HW3TEjDJPS488Cww8zhx/PM8MwKNhojTnQBgAygHUArAAnOhAnAAJADRdlBiC5vzy2MlVR1zxKEexuwnRo3nZ3bhOhd/8uibeDD0qL77OyZQxnWoyWXDwN4KLKLcaJLrnwu6DnOvHIapFEKBr8DuBWb1uXetdVx0TTdPFAjPLgJ4LIZbVWSP97wAG1RNDMTkwTAdR2NE53OA97Mr5c80PIj9eCyt++3FovesZm6n6wsR6RyKcADLQ6Et+iHzlnUG/i2O84DpNU9jYzGAVzV0VpD8PvSKS6l/aMoxyeR0T0AFTCZtjzeSAw/MIwQD7TYH94BcKHFojaLejs2EhoAgQdaeP7i07/SVtFaaX3KYfI1D9B0y4X01MwXeoHrKG3ovnQq5Do/H+SBXnX30NIWtFjUYlFPiKxrgmU59Zo0hDH0NEG7ELsmVrvQ4cEID9CSpPLR9MxH2nabUZeczQ7zQK9D3V8rij+rxaL0LW1AbyrtbT+dxGxBsMqqup+afTtPz7N5n55j/vO795P0Bjv8l0DPMcfe2moA+AuvEcCw7psxxQAAAABJRU5ErkJggg=='
            let icons2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAATCAYAAABsmQZ/AAAB2ElEQVRIibXWS0sCURQH8P8MVjPmO0MrMCuyMopqEUFRK1vMSiho1cJPEn2FNi0l2rRoFwnlJgSDggqil1hhRfTw0Wg+smQmrqWM4nLu2czlDsyPc87l3GHkRdREwBdkAGgBWAEYAGigTpQAiAASjT7I2x7DU+6j9TUu9z7IyDKrEoq8ofPkYGHD2wht6z/bXOWzb261sEq05JIuAK01WQR8QQ2XT3TpxIcJtUGUM+26APBVXzptz8X2PCuVeBqo2D5wCCBTjxpM8es5GqDMsKWHIe8ugGwVDfiCZG3Rf8TGaKAFnS2SsfQ+CX7PjzJTvu98a0bzk7fQQNNW1zF5kLUS1Vtez+dpgKS6r87ZAIDPKvo/EMzGZJRKab850+OLc/YSQBGKTFs6YqHh5i/RQQNNW11nAD4Ev0dWonp7LCQAYGigKfvofqW0ZfS/tEZT/GaSBlhq0qbuRpbC5ABXUTLQjcmog8vFB2ign2YnKW1K8HskJapz3OwIjCypdZvUhNg+FCJTSLnH/k2hyDQNUGI1hfuRpT0ydutRTpt5HqaBZk3dp0Xe/Cz4PeQurUFzxda2WzUxmWGkgs52FR1fXiH9rH9P+pgkFys5wSr/JZA+JpSnthwAfgFZ1JZKgceBuQAAAABJRU5ErkJggg=='
            let icons3 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAATCAYAAABsmQZ/AAABzElEQVRIibXWOUsDQRQH8P/MbsyxxsQoxAPihVEjiFiIoMQqFlvZWflZxK9gYy02FnZiQNNIQAtBBfEkKh4ErxijMcaYzYxM0LAJljuv2WEW9sd7b3izhG+hKqK5GAHgAtAMoAGACmvCAJABkPrvg06/sj0Wsi8uOMhTPwGnFqH4ZG17W/ml6f/Qpt665XkneQxZhf2Fnb4EAWhVWURzMdVBUu319GbEahDlTNuPAHzVls7VZVudojCcMtAM69sB8F6LNniV00kZIAc1borT6wA+Kmg0FxNrn5tcD8tA89x//s6673QtUjRn6uyxrUyo5NMnA30rBXfFQ6zNqNunHE7JAEV1H0rhKIBsBf0dCI0empBS2m/uvb03wscACjBlam9V44N1JBOQgb6x4AGAV12LcDPqblHiOgAiA02Xhjb/SltGf0vr8SpnozJAg7vSl8WZbXGAK6gY6B6aCDjIc58MNMs7RWnTuhZhZrQ+YFvTCZhVt0lVZEoDcTGFzHu0PIXo+bgMkEHNXxVnNsTYrUUdLpoclIF+sI79Am9M6lpE3KVVaK7Ami6sxDgIy3P/SeJ7dk70s/a96OOLuFjFCbb4L0H0MWU+teUA8AMc5ZPtr50lvAAAAABJRU5ErkJggg=='
            let icons4 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAATCAYAAABsmQZ/AAABvUlEQVRIibXWUUsUURTA8f89M62zOruiG0VJSj1k5EtoSFAQvYgIQV9iP4f00BfodT9Bz1KRTxbkQ2S+ZJCEkiER6Gq56bTOnBtXdJldfJx7noa5MD/uOfeeM+bq2wXy0WhFBugHLgJVIKSYSIF9YOe8D5ZXw+zei1L6vCn2lgUpCOWSmpVnh31PzkNrC6Xs6a7Y20VhZ7En9iYw0LWLRisK940d+Sk6WTTo4rKaz0DSm7r+xVI2k0LZB3o9k2XgTy9a3RB96AMUSB8dhy+BVgdttCL3PLwtescHWlPz9ZqaH/U4Oc7vtPy6lD5IDMM+0DGVD8Bv6L4OlfVAZ3yAgJ1K5RVw0EFPG8LQd7FeUluxZutuGqwB/8jttO9jmE0cGDvqAx1Ts+quaT1ObB6trIQ6Bxgf6Hgmi2epPUFPUzu4KTrtA4wszdl2+B446qCuoW+Jju6JHfeBjqi41DbrcaJ5NF66kM1pcdOkK26ovHNdKP/OodXNQO/7AEM4mm0Hb4DDXjT6JXbCB3pF5VPVmu16nLhZ2oX+HVLzrUjMgNbUfHncDuZdPXvXXR133WB1J7jgvwRXx538qT0J4D++WY8YukJm3AAAAABJRU5ErkJggg=='

            var option = {
                color: colorList,
                // backgroundColor: '#000416',
                tooltip: {
                    show: true,
                    trigger: 'item',
                    padding: [8, 15],
                    backgroundColor: 'rgba(12, 51, 115,0.8)',
                    borderColor: 'rgba(3, 11, 44, 0.5)',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 1)'
                    },
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: 20,
                    right: '12%',
                    top: 10,
                    bottom: 10,
                },
                xAxis: [
                    {

                        splitLine: {
                            show: false,
                        },
                        type: 'value',
                        show: false,
                    },
                ],
                yAxis: [
                    {
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        inverse: true,
                        data: result.map((item) => item.name),
                        axisLabel: {
                            color: '#fff',
                            // fontSize: 14,
                            inside: true,
                            verticalAlign: 'bottom',
                            // margin: 10,
                            lineHeight: 24,
                            formatter: (name, index) => {
                                const id = index + 1;
                                if (id < 4) {
                                    return `{icon${id}|${id}}{name|${name}}`;
                                } else {
                                    return `{count|${id}}{name|${name}}`;
                                }
                            },
                            rich: {
                                icon1: {
                                    width: 25,
                                    height: 14,
                                    padding: [2, 2, 0, 0],
                                    align: 'center',
                                    backgroundColor: {
                                        image: icons1
                                    },
                                    color: '#ffffff',
                                    fontSize: 10,
                                },
                                icon2: {
                                    width: 25,
                                    height: 14,
                                    padding: [2, 2, 0, 0],
                                    align: 'center',
                                    backgroundColor: {
                                        image: icons2
                                    },
                                    color: '#ffffff',
                                    fontSize: 10,
                                },
                                icon3: {
                                    width: 25,
                                    height: 14,
                                    padding: [2, 2, 0, 0],
                                    align: 'center',
                                    backgroundColor: {
                                        image: icons3
                                    },
                                    color: '#ffffff',
                                    fontSize: 10,
                                },
                                count: {
                                    width: 25,
                                    height: 14,
                                    padding: [2, 2, 0, 0],
                                    align: 'center',
                                    backgroundColor: {
                                        image: icons4
                                    },
                                    color: '#ffffff',
                                    fontSize: 10,
                                }
                            },
                        },
                    },
                    {
                        type: 'category',
                        inverse: true,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 12,
                            },
                            formatter: function (value) {
                                return `{nums|${value}}次 \n {icons|}`;
                                // return value + '%';
                            },
                            rich: {
                                nums: {
                                    color: "#ffffff"
                                },
                                icons: {
                                    width: 10,
                                    height: 4,
                                    padding: [0, 0, 0, 0],
                                    align: 'right',
                                    backgroundColor: '#00ffea',
                                }
                            }
                        },
                        data: result.map((item) => item.value),
                    },
                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        barWidth: 6, // 柱子宽度
                        MaxSize: 0,
                        showBackground: true,
                        barBorderRadius: [30, 0, 0, 30],
                        backgroundStyle: {
                            color: '#194B72',
                        },
                        label: {
                            show: true,
                            position: 'insideRight',
                            distance: -15,
                            formatter: function (params) {
                                console.log(params)
                                return `{a|}`;
                            },
                            rich: {
                                a: {
                                    width: 30,
                                    height: 30,
                                    backgroundColor: {
                                        image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAEBElEQVRYha1YTY8TRxB9Mx7bu157d8H7pQQpOSOhHIOQOCFuICQu/BkkhHLfHALJL8gPCFEOuUYcOCBxygUOuYBgFy8LeP01O56JevTKqq3tnrVZnjSy5enuel31qrra0e/vCiyIGoAmgAa/x3xyPhmAYwATANNFlk7mHBcBWAbQIgkfavytqd6lAIZ8vgoZR2JVGctpZEIviEfEQwkJiffc0wHwCcD4S8k4b6yTDGj4CMAIgC+2EhJHcqC82aadi5z7MTA/SMZ5ocv3buJnGlgEhQrRCr3ryNUBHPj0FAeIbJCIE+L7LyBiMeA6GdfdUGEPeiaiO2vUxQfqwYc69ZBwXkFjKTdh4d716PE67fR0yCyZdQ48riDSUjoIQfRlsyhniDZoZ40aKqHDtMSYOqaHHiLO+BYJn5WFCcdtesbm3GjBjc1KgSazyk8n1sws0FA6WgR1zrO1ya3f5/c1S2aZhjKPWOuMs0/s8yBWOtQYMKMSRmVmoMXPIzPBCfMCP88DIaRRKHsu9UtWMeNWsChptKpC800Ty1dWcLURYzvN8fbFEZ7tp2XR86FOo9rzI8rD2Y8TJaDUUxnbISK3urjbSfAwkh3XgBsXcPA5w/2/DvAkMM2SkaOlPDpiJS67o4avMDnc3sC91QS/RMb1EdBdS/DrrS7uBMgk9JBGKvZiZdCXQafw/RI67RoeBIyVnDoJfnIhDLz3ZVZJNFYitnXF65XLK7geqXT0sgG6P7RxLfDaalDOqDhWmWL14k3lRoRLVUTUuG/DXE9A7EZVtcN7zGdFeZ6ciawoy/48686cEavw2LBYDZX4b4x/PGK3GL0c4WngnW0dZjKJtYDMIN/Ji38H6I1zPKpiMsyx+2pYdnY+pOY3sZvFyqhVeRpqH/7o4edJjsce72XjHLt/9vBbgMjUQ0bq3LG7HbjwbNPwnolph48XP67iu50GbiYRtrICe28m+Pt5H69D43kI6yPH6WWHn3tyVdlkMTo0R0LEtsGb5gvCeWXfbLbFVsN5qyfikRJty3+hm59zQHqk0HFTNmFCZkTmdXUbEEy+AqGPHq3IITyVaAiZwjQ7tv4Mz+iHQ5A203YDNdPMFTBGh/SC+83Xw4wZ80GoICoUHLfvqUnSI8Vcc0bU1pZDirlJYdkLV86bYV/dGH23g0nAi0KkwfCcCH+oWe5SOzH8zXnOHVn3V0E83lR2TqzrO5tcETzgwKby1HmwpNaZUkenKnyopZSbpLi0S9f3PVlRhSbTV3eTh6G/SqquHlPe+NqswvLPQkbhpfw+pV4iZknCDSyp9XNupPKaPM89SG6Grn+V2hDsjT0bcnMdiTPLwryXMtmZziLJJGnQnHfknyvJqPlDCuB/RZgq6KBZCU8AAAAASUVORK5CYII=",
                                    }
                                }
                            }
                        },
                        data: result.map((item, index) => {
                            return {
                                name: item.name,
                                value: item.value,
                                itemStyle: {
                                    barBorderRadius: [30, 30, 30, 30],
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#0F1F45",
                                            },
                                            {
                                                offset: 1,
                                                color: colorList[index],
                                            },
                                        ],
                                    }
                                }
                            }
                        }),
                    },
                    

                ],
            }
            myEcharts.setOption(option)
            window.addEventListener("resize", () => {
                myEcharts.resize();
            });

        },