使用Echarts实现top排序条形图

影·逸

已于 2024-02-07 08:16:18 修改

阅读量2.4k

点赞数 3

分类专栏： Echarts 文章标签： echarts

于 2022-08-04 08:35:35 首次发布

本文链接： https://blog.csdn.net/weixin_48474646/article/details/126152445

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文通过示例代码详细讲解如何使用Echarts库创建一个带有Top排序的条形图。代码中展示了设置图表样式、数据绑定、坐标轴配置等关键步骤，包括条形图颜色渐变、标签格式化等功能。最终效果展示了一个美观且功能完整的条形图。

摘要由CSDN通过智能技术生成

采用Echarts实现top排序条形图的实现方式的代码如下：

var yData = ['第一名但', '第二名我', '第三名我', '第四名我', '第五名我'];
var seriesData = [300, 289, 276, 0, 0];

option = {
  tooltip: {},
      legend: {
        show: false,
      },
      grid: {
        top: '-3%',
        left: '-8%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: "value",
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            label: {
              show: false,
              margin: 30,
            },
          },
          data: yData,
          axisLabel: {
            margin: 110,
            fontSize: 14,
            align: "left",
            color: "rgba(255,255,255,0.85)",
            // 配置序号背景
            rich: {
              a1: {
                color: "#FFD743",
                width: 30,
                height: 30,
                align: "center",
              },
              a2: {
                color: "#4690FF",
                width: 30,
                height: 30,
                align: "center",
              },
              a3: {
                color: "#FF8A45",
                width: 30,
                height: 30,
                align: "center",
              },
              b: {
                color: "rgba(255,255,255,0.65)",
                width: 30,
                height: 30,
                align: "center",
              },
            },
            formatter: function (params, index) {
              var leftIndex = index + 1;
              if (leftIndex < 4) {
                return ["{a" + leftIndex + "|" + leftIndex + "}" + "  "+params].join(
                  "\n"
                );
              } else {
                return ["{b|" + leftIndex + "}" + "  " +params].join("\n");
              }
            },
          },
        },
      ],
      series: [
        {
          zlevel: 2,
          type: "bar",
          barWidth: 12,
          data: seriesData,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(27,46,204,0.80)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: " #41D7FF", // 100% 处的颜色
                },
              ],
            },
            barBorderRadius: [8, 8, 8, 8],
          },
          label: {
            show: true,
            position: "right",
            color: "rgba(255,255,255,0.85)",
            fontSize: 14,
            offset: [10, 1],
            formatter:function(params){
              return params.value + '项'
            }
          },
        },
      ],
};