Echarts将数据进行排名 Echarts排行榜 鼠标进行缩放

一、效果图

二、echarts设置代码

1.容器

<div id="ranking"  style="height: 100%;width:100%;"> </div>

2.echarts配置

rankingOption: {
  configObj: null,
  tooltip: {
  trigger: 'axis',
  },                   
  grid: {
    left: "60",
    right: "30",
    bottom: "20",
    top: "20",
    containLabel: false
  },
  xAxis: {
    type: "value",
    show: true
  },
  yAxis: {
    type: "category",
    data: [],
    //升序
    inverse: true,
    axisLine: {
       show: false
    },
    axisTick: {
       show: false
    },
    axisLabel: {
       margin: 45,
       width: 40,
       align: "left",
       overflow: "truncate",
    }
  },
  series: [
    {
       realtimeSort: true,
       type: "bar",
       showBackground: true,
       label: {
         show: true,
         position: "right",
         color: "rgba(0,0,0,0.45)"
       },
       barWidth: 15,                           
       data: [],
       itemStyle: {
         normal: {
           label: {
             show: true, //开启显示
             position: 'right', //在右显示
             textStyle: {
               //数值样式
               color: 'black',
               fontSize: 14
             }
           }
        }
      },
    }
  ],
  // 柱状图缩放滑动设置
  dataZoom: [
    {
      type: 'slider',
      show: false,
      yAxisIndex: [0],
      filterMode: 'filter'
    },
    {
      type: 'inside',
      AxisIndex: [0]
    }
   ]
  }

3.赋值展示

// 后台获取的数据 result.data
this.rankingOption.yAxis.data = result.data.map(item => item.name);
this.rankingOption.series[0].data = result.data.map(item => item.num);
// 向容器div填充
this.myEcharts = echarts.init(document.querySelector('#ranking'));
this.myEcharts.setOption(this.rankingOption);