快捷導(dǎo)航

echarts實現(xiàn)排名柱狀圖的示例代碼

更新時間：2023年09月14日 09:15:38 作者：小小?愿望

在ECharts中,可以通過設(shè)置數(shù)據(jù)的順序來控制柱狀圖的排序,本文就介紹了echarts實現(xiàn)排名柱狀圖的示例代碼,具有一定的參考價值,感興趣的可以了解一下

通過echarts實現(xiàn)排名柱狀圖，效果圖如下，下方是完整代碼，可以直接在echarts示例中運行。在線運行

在echarts中想要實現(xiàn)個性化的label，通常會在 formatter 中實現(xiàn)，但是要想有顏色或背景色就不能用 div 了，這個時候就要借助 rich 了，首先需要在 rich 中定義變量，如例子中的 one，可以隨便定義，只要在 formatter 中使用一樣的名字就行，一定要有 "|" ,不然不會被解析，更多可移步官方富文本標(biāo)簽。

let ydata = ['上海', '北京', '深圳', '天津', '河南', '新疆', '澳門'];
let xdata = [12, 13, 14, 15, 16, 17, 18];
option = {
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "80",
    right: "20",
    bottom: "20",
    top: "20",
    containLabel: false,
  },
  xAxis: {
    type: "value",
    show: false,
  },
  yAxis: {
    type: "category",
    data: ydata,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      margin: 70,
      width: 60,
      align: "left",
      overflow: "truncate",
      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: "#59c9f9",
        },
        b: {
          color: "#59c9f9",
        },
        c: {
          color: "#59c9f9",
        },
        d: {
          color: "#59c9f9",
        },
        // 第一名
        one: {
          backgroundColor: "#E86452",
          color: "white",
          width: 12,
          height: 16,
          padding: [1, 0, 0, 5],
          borderRadius: 10,
          fontSize: 11,
        },
        // 第二名
        two: {
          backgroundColor: "#FF9845",
          color: "white",
          width: 12,
          height: 16,
          padding: [1, 0, 0, 5],
          borderRadius: 10,
          fontSize: 11,
        },
        // 第三名
        three: {
          backgroundColor: "#F6BD16",
          color: "white",
          width: 12,
          height: 16,
          padding: [1, 0, 0, 5],
          borderRadius: 10,
          fontSize: 11,
        },
        // 一位數(shù)
        four: {
          backgroundColor: "rgba(0,0,0,0.15)",
          color: "white",
          width: 12,
          height: 16,
          padding: [1, 0, 0, 5],
          borderRadius: 10,
          fontSize: 11,
        },
        // 兩位數(shù)
        five: {
          backgroundColor: "rgba(0,0,0,0.15)",
          color: "white",
          width: 16,
          height: 16,
          padding: [1, 0, 0, 1],
          borderRadius: 10,
          fontSize: 11,
        },
      },
    },
  },
  series: [{
    type: "bar",
    showBackground: true,
    label: {
      show: true,
      position: "right",
      color: "rgba(0,0,0,0.45)",
    },
    barWidth: 20,
    itemStyle: {
      color: "#5B8FF9",
    },
    data: xdata,
  }, ],
};

到此這篇關(guān)于echarts實現(xiàn)排名柱狀圖的示例代碼的文章就介紹到這了,更多相關(guān)echarts 排名柱狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: