echart 柱状图 柱状图带阴影且值显示到最后

一、首先展示UI图和各位同学对比下是否类似，以免浪费时间

二、一般的 echarts 柱状图上面的值大概是这样

只能显示到最后....

好吧，开始先把背景加上

    series: [
      {
        type: "bar",
        data: [50, 20, 36, 30, 35, 40, 40],
        areaStyle: {},
        barWidth: 8,
        smooth: true,
        itemStyle: {
          borderRadius: 5,
        },
        label: {
          show: true,
          position: "right",
          color: "#fff",
        },
        showBackground: true,  // 背景在这里
        backgroundStyle: {     // 背景颜色在这里
          color: "#2C313B",
        },
      },
    ],

关键代码

  setTimeout(function () {
    var width = myChart.getWidth();
    var opt = myChart.getOption();
    var grid = opt.grid[0];
    var right = grid.right;
    var left = grid.left;
    right = (width * parseFloat(right)) / 100;
    left = (width * parseFloat(left)) / 100;
    var x = width - left - right;
    myChart.setOption({
      series: [
        {
          label: {
            show: true,
            position: "left",
            offset: [x + 50, 0],
          },
        },
      ],
    });
  });

获取到当前charts柱子的宽度，然后新增一个series 条目，通过label 的offset 值进行推送数值

总实现代码

function initCharts4() {
  let chartDom = document.getElementById("charts4");
  let myChart = echarts.init(chartDom);
  let option = {
    color: [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0.35,
            color: "#5372FF", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#598DFF", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
    title: {
      show: false,
    },
    grid: {
      bottom: "1%",
      right: "15%",
      top: "5%",
      left: "19%",
    },
    tooltip: {},
    xAxis: {
      show: false,
    },
    yAxis: {
      data: [
        "1量",
        "2量",
        "3量",
        "4量",
        "5量",
        "6量",
        "7量",
      ],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#ffffffb2", //坐标的字体颜色
        },
      },
    },
    series: [
      {
        type: "bar",
        data: [50, 20, 36, 30, 35, 40, 40],
        areaStyle: {},
        barWidth: 8,
        smooth: true,
        itemStyle: {
          borderRadius: 5,
        },
        label: {
          show: true,
          position: "right",
          color: "#fff",
        },
        showBackground: true,
        backgroundStyle: {
          color: "#2C313B",
        },
      },
    ],
  };
  setTimeout(function () {
    var width = myChart.getWidth();
    var opt = myChart.getOption();
    var grid = opt.grid[0];
    var right = grid.right;
    var left = grid.left;
    right = (width * parseFloat(right)) / 100;
    left = (width * parseFloat(left)) / 100;
    var x = width - left - right;
    myChart.setOption({
      series: [
        {
          label: {
            show: true,
            position: "left",
            offset: [x + 50, 0],
          },
        },
      ],
    });
  });
  myChart.setOption(option);
}

okk 圆满解决