echarts - 排行榜b

• 技术背景：vue2、echarts

• 效果

  • 默认展示

    

  • 鼠标悬浮

    

                // 直角坐标系内绘图网格
                grid: {
                    left: 16,
                    right: 16,
                    bottom: 16,
                    top: 50,
                    containLabel: true // 刻度标签
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: {
                    max: 'dataMax', // 💥 实现排行榜注意点之一： 此时取数据在该轴上的最大值作为最大刻度
                    axisLabel: {
                        color: "#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#90959e"
                        }
                    },
                    axisTick: {
                        show: true, //坐标轴刻度线
                    },
                    splitLine: { show: false },   //去除网格线
                    splitArea: { show: false },  // 去除图表背景阴影，使图表背景完全透明
                },

                yAxis: {
                    type: 'category',
                    data: data.yAxis,
                    inverse: true,
                    animationDuration: 300,
                    animationDurationUpdate: 300,
                    axisLabel: {
                        color: "#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#90959e"
                        }
                    },
                    axisTick: {
                        show: false, //不显示坐标轴刻度线
                    },
                },

                series: [
                    {
                        realtimeSort: true, // 实时排序
                        name: '使用次数',
                        type: 'bar',
                        data: data.series,
                        label: {
                            show: false,
                        },
                        barWidth: 16, // 柱子宽度
                        // 设置柱子的样式，渐变背景
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    { offset: 0, color: '#007cff' },
                                    { offset: 1, color: '#00c195' }
                                ]),
                            },
                        },

                    }
                ],
                legend: {
                    show: true,
                    icon: 'circle',
                    top: 20,
                    left: 16,
                    textStyle: {
                        color: '#fff'
                    }
                },
                animationDuration: 0,
                animationDurationUpdate: 3000,
                animationEasing: 'linear',
                animationEasingUpdate: 'linear'
            }