柱状图顶部高亮

这里我用echarts入门示例demo进行举例

主要思路是通过将两个柱状图拼接在一起实现。series的配置内，定义两个柱状图，然后通过将stack值设置为一样进行拼接

先看效果

下面放代码

let options = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            stack: "1",
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: "#E89999", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#fff", // 0% 处的颜色, // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
          {
            stack: "1",
            name: "销量",
            type: "bar",
            data: [1, 1, 1, 1, 1, 1],
            itemStyle: {
              normal: {
                color: "red",
              },
            },
          },
        ],
      };