堆叠柱状图 自定义绘图

主要是让 series 里面的 stack 属性值相同，stack： 数据堆叠，同个类目轴上系列配置相同的stack 值可以堆叠放置

 配置项：

option = {
    tooltip: {
        trigger: 'axis',
        // 坐标轴指示器配置项
        axisPointer: {      
            type: 'shadow'   
        }
    },
    legend: {
        data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        // grid 区域是否包含坐标轴的刻度标签
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
        {
            name: 'Direct',
            type: 'bar',
            // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
    ]
};

效果图：

自定义绘图

配置：

option = {
  xAxis: {
    type: 'value',
    show: false
  },
  yAxis: {
    type: 'category',
    show: false
  },
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  series: [
    {
      name: 'aaa',
      type: 'bar',
      data: [200],
      barWidth: 10,
      stack: 'total',
      itemStyle: {
        color: '#45c946'
      }
    }, {
      name: 'bbb',
      type: 'bar',
      data: [250],
      barWidth: 10,
      stack: 'total',
      itemStyle: {
        color: '#eee'
      }
    }, {
      stack: 'total',
      type: 'custom',
      data: [200],
      renderItem: (params, api) => {
        const value = api.value(0)
        const endPoint = api.coord([value, 0])
        return {
          type: 'group',
          position: endPoint,
          children: [
            {
              type: 'path',
              shape: {
                d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
                x: -5,
                y: -20,
                width: 10,
                height: 10,
                layout: 'cover'
              },
              style: {
                fill: 'red'
              }
            },
            {
              type: 'path',
              shape: {
                d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                x: -5,
                y: 10,
                width: 10,
                height: 10,
                layout: 'cover'
              },
              style: {
                fill: 'red'
              }
            }
          ]
        }
      }
    }
  ]
}

图片：

另外去copy了一篇文章的相关的横向柱状图定制图和代码：

var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
option = {
    // 声明颜色数组
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%",
      containLabel: false,
    },
    // 不显示x轴
    xAxis: {
      show: false,
    },

    yAxis: [
      {
        type: "category",
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        inverse: true,
        axisLine: {
          // 不显示y轴线条
          show: false,
        },
        axisTick: {
          // 不显示y轴刻度值
          show: false,
        },
        axisLabel: {
          // 设置y轴刻度标签（即y轴上的文字）
          color: "#fff",
        },
      },
      {
        show: true,
        data: [702, 350, 610, 793, 664],
        inverse: true,
        // 不显示刻度线
        axisLine: {
          show: false,
        },
        // 不显示刻度值
        axisTick: {
          show: false,
        },
        // 显示刻度标签，即文字
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        // inverse: true,

        data: [70, 34, 60, 78, 69],
        // 主子修改为圆角
        itemStyle: {
          barBorderRadius: 10,
          color: function (params) {
            return myColor[params.dataIndex];
          },
        },
        // 柱子之间的距离
        barCategoryGap: 10,
        // 柱子的宽度
        barWidth: 10,
        label: {
          show: true,
          position: "inside",
          formatter: "{c}%",
        },
      },
      {
        name: "框",
        type: "bar",
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        // 主子的间距
        barCategoryGap: 50,
        // 柱子的宽度
        barWidth: 15,
        // 主子的样式
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15,
        },
      },
    ],
  };