echarts不等分柱状图

最新推荐文章于 2024-05-16 18:22:05 发布

BBH2000

最新推荐文章于 2024-05-16 18:22:05 发布

阅读量452

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/BBH2000/article/details/130576436

版权

效果图，目前每组数据一样
在这里插入图片描述

// 不同点补率
var option3 = {
  toolbox: {
    show: true,
    orient: "vertical",
    feature: {
      saveAsImage: {
        show: true,
        excludeComponents: ["toolbox"],
        pixelRatio: 2,
      },
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: [
    { top: 30, bottom: 60, left: 25, right: 20 },
    { height: 50, bottom: 10, left: 25, right: 20 },
  ],
  xAxis: [
    {
      type: "category",
      data: [],
      gridIndex: 0,
      axisLabel: {
        color: "#959595",
        interval: 0,
        rotate: 15,
      },
      axisLine: {
        lineStyle: {
          color: "#959595",
          type: "dotted", //虚线
        },
      },
      axisTick: {
        // alignWithLabel: true,
        lineStyle: {
          color: "#959595",
        },
      },
      zlevel: 2,
    }, {
      type: "category",
      gridIndex: 1,
      axisLine: { show: false, },
      zlevel: 1,
    },
  ],
  yAxis: [
    {
      name: "(%)",
      type: "value",
      gridIndex: 0,
      axisLabel: { color: "#959595", },
      splitLine: {
        lineStyle: {
          type: "dotted",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#959595",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#959595c",
        },
      },
    }, {
      type: "value",
      gridIndex: 1,
      axisLabel: { show: false, },
      axisLine: { show: false, },
      splitLine: { show: false, },
      axisTick: { show: false, },
    },
  ],
  series: [
    {
      data: [],
      type: "bar",
      label: {
        show: true,
        position: "top",
        formatter: "{c}%",
        textStyle: {
          color: "#959595",
        },
      },
      itemStyle: {
        normal: {
          color: "#69b2f9",
        },
      },
      xAxisIndex: 0,
      yAxisIndex: 0,
    }, {
      data: [{ name: "HS7", value: 1, },],
      label: {
        show: true,
        position: "inside",
        formatter: "{b}",
        offset: [0, 10],
        textStyle: {
          color: "#959595",
        },
      },
      tooltip: {
        show: false
      },
      type: "bar",
      barGap: 0,
      barWidth: "",
      itemStyle: {
        normal: {
          color: "rgba(134,176,237, 0)",
          borderColor: "#B3B3B3",
          borderWidth: 0.5,
          borderType: "dotted",
        },
      },
      xAxisIndex: 1,
      yAxisIndex: 1,
    }, {
      data: [{ name: "H9", value: 1, },],
      label: {
        show: true,
        position: "inside",
        formatter: "{b}",
        offset: [0, 10],
        textStyle: { color: "#959595", },
      },
      tooltip: {
        show: false
      },
      type: "bar",
      barGap: 0,
      barWidth: "",
      itemStyle: {
        normal: {
          color: "rgba(237,124,47, 0)",
          borderColor: "#B3B3B3",
          borderWidth: 0.5,
          borderType: "dotted",
        },
      },
      xAxisIndex: 1,
      yAxisIndex: 1,
    }, {
      data: [{ name: "H7", value: 1, },],
      label: {
        show: true,
        position: "inside",
        formatter: "{b}",
        offset: [0, 10],
        textStyle: {
          color: "#959595",
        },
      },
      tooltip: {
        show: false
      },
      type: "bar",
      barGap: 0,
      barWidth: "",
      itemStyle: {
        normal: {
          show: false,
          color: "rgba(242,169,59, 0)",
          borderColor: "#B3B3B3",
          borderWidth: 0.5,
          borderType: "dotted",
        },
      },
      xAxisIndex: 1,
      yAxisIndex: 1,
    }, {
      data: [{ name: "EHS9", value: 1, },],
      label: {
        show: true,
        position: "inside",
        formatter: "{b}",
        offset: [0, 10],
        textStyle: { color: "#959595", },
      },
      tooltip: {
        show: false
      },
      type: "bar",
      barCategoryGap: 0,
      barGap: 0,
      barWidth: "",
      itemStyle: {
        normal: {
          color: "rgba(249,207,54, 0)",
          borderColor: "#B3B3B3",
          borderWidth: 0.5,
          borderType: "dotted",
        },
      },
      xAxisIndex: 1,
      yAxisIndex: 1,
    }, {
      data: [],
      type: "line",
      symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示
      showSymbol: false, // 不显示symbol不显示
      lineStyle: {
        width: 0, // 线宽是0不显示线
        color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
      },
    }, {
      data: [],
      type: "line",
      symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示
      showSymbol: false, // 不显示symbol不显示
      lineStyle: {
        width: 0, // 线宽是0不显示线
        color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
      },
    }
  ],
};

可以通过设置barWidth得所占比例，来修改柱状图每组数据所占区域

 option3.series[1].barWidth = "25%";
          option3.series[2].barWidth = "25%";
          option3.series[3].barWidth = "25%";
          option3.series[4].barWidth = "25%";

barWidth=当前组数据个数/所有数据总数
为保证初始页面美观，当没有数据时，可以将每组的barwidth设为同宽度，