echarts中在柱狀圖上方顯示文字的示例代碼

更新時(shí)間：2024年01月15日 10:13:43 作者：有蟬

這篇文章給大家介紹了在echarts中如何在柱狀圖上方顯示文字,文中給出了完整的示例代碼,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

如何在柱狀圖上方顯示文字？如下圖所示

關(guān)鍵代碼如下圖所示

完整代碼如下

let myChart = this.$echarts.init(document.getElementById("goodsChart"));
      // 繪制圖表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["管理人員出勤人數(shù)", "班組人員出勤人數(shù)"],
          align: "left",
          left: 10,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#063374",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00c7ff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}"
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#00c7ff",
                width: 1,
                type: "solid"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#063374"
              }
            }
          }
        ],
        series: [
          {
            name: "管理人員出勤人數(shù)",
            type: "bar",
            data: seriesData1,
            barWidth: 10, //柱子寬度
            barGap: 1, //柱子之間間距
 
            itemStyle: {
              normal: {
                label: {
                  formatter: "{c}"+"人",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontWeight: "bolder",
                    fontSize: "12",
                    color: "#fff"
                  }
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "#3db0fe"
                  },
                  {
                    offset: 0,
                    color: "#0a81d4"
                  }
                ]),
                opacity: 1
              }
            }
          },
          {
            name: "班組人員出勤人數(shù)",
            type: "bar",
            data: seriesData2,
            barWidth: 10,
            barGap: 1,
            itemStyle: {
              normal: {
                label: {
                  formatter: "{c}"+"人",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontWeight: "bolder",
                    fontSize: "12",
                    color: "#fff"
                  }
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "#4af0fc"
                  },
                  {
                    offset: 0,
                    color: "#03f2a3"
                  }
                ]),
                opacity: 1
              }
            }
          }
        ]
      });

以上就是echarts中在柱狀圖上方顯示文字的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于echarts柱狀圖上方顯示文字的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: