双柱状图

04afd3bb-0fca-4a78-b5ab-f8177377c972.png

直接将下面代码复制进行查看: 第三方平台

var data = [];
// var barname = ["负荷有功(KW)", "负荷无功(kVar)"];
// for (var i = 0; i < 2; i++) {
//   var val = [];
//   for (var j = 0; j < 12; j++) {
//     val.push({ name: "S" + j, value: getRandom(0, 900) });
//   }
//   data.push({ name: barname[i], data: val });
// }
data = [
  {
    name: "负荷有功(KW)",
    data: [
      {
        name: "S0",
        value: 50,
      },
      {
        name: "S1",
        value: 100,
      },
      {
        name: "S2",
        value: 60,
      },
      {
        name: "S3",
        value: 80,
      },
      {
        name: "S4",
        value: 50,
      },
      {
        name: "S5",
        value: 100,
      },
      {
        name: "S6",
        value: 60,
      },
      {
        name: "S7",
        value: 80,
      },
    ],
  },
  {
    name: "负荷无功(kVar)",
    data: [
      {
        name: "S0",
        value: 50,
      },
      {
        name: "S1",
        value: 100,
      },
      {
        name: "S2",
        value: 60,
      },
      {
        name: "S3",
        value: 80,
      },
      {
        name: "S4",
        value: 50,
      },
      {
        name: "S5",
        value: 100,
      },
      {
        name: "S6",
        value: 60,
      },
      {
        name: "S7",
        value: 80,
      },
    ],
  },
];

let yAxisData = new Set(); // 主要用于去除重复
let legendData = [];
data.map((d) => {
  legendData.push(d.name); // 图例:  ["负荷有功(KW)", "负荷无功(kVar)"]
  d.data.map((item) => {
    yAxisData.add(item.name); // Y轴数据: ['S0', 'S1','S2','S1','S2','S3']
  });
});

yAxisData = [...yAxisData]; // [['S0', 'S1','S2','S1','S2','S3']]
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

option = {
  backgroundColor: "#00185a",
  tooltip: {
    //  提示框组件。
    show: true,
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    // 图例组件。
    left: "center",
    top: 12,
    itemWidth: 20,
    itemHeight: 20,
    itemGap: 50,
    borderRadius: 0,
    textStyle: {
      color: "#bfbfbe",
      fontSize: 12,
    },
    data: legendData,
  },
  grid: [
    // grid 组件 是一个矩形容器
    {
      left: "6%",
      width: "36%",
      containLabel: true, // 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件
      bottom: 20,
      top: 40,
    },
    {
      left: "52%", // 中间网格
      width: "0%",
      top: 40,
      bottom: 40,
    },
    {
      right: "6%", // 右边网格
      width: "36%",
      containLabel: true,
      bottom: 20,
      top: 40,
    },
  ],
  xAxis: [
    // X轴
    {
      type: "value",
      max: function (value) {
        // 坐标轴刻度最大值
        return value.max;
      },
      position: "bottom", // x 轴的位置。
      inverse: true, ///   是否是反向坐标轴
      axisLabel: {
        /// 是否显示刻度标签。
        show: true,
        color: "#009afe",
        margin: 5,
      },
      axisLine: {
        //  是否显示坐标轴轴线
        lineStyle: {
          color: "#464955",
        },
      },
      axisTick: {
        // 坐标轴刻度
        lineStyle: {
          color: "#464955",
        },
      },
      splitLine: {
        // X轴的分割线
        show: true,
        lineStyle: {
          color: "#1F386F",
        },
      },
    },
    {
      gridIndex: 1, // x 轴所在的 grid 的索引
      show: true,
    },
    {
      max: function (value) {
        return value.max;
      },
      position: "bottom",
      gridIndex: 2,
      type: "value",
      axisLabel: {
        show: true,
        color: "#009afe",
        margin: 5,
      },
      axisLine: {
        lineStyle: {
          color: "#464955",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#464955",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#1F386F",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "category",
      inverse: true,
      data: yAxisData,
      position: "right",
      axisLabel: {
        // 显示刻度标签
        show: false,
      },
      axisLine: {
        // Y轴线
        lineStyle: {
          color: "#464955",
        },
      },
      axisTick: {
        // 刻度
        lineStyle: {
          color: "#464955",
        },
      },
    },
    {
      type: "category",
      inverse: true,
      data: yAxisData,
      gridIndex: 1,
      position: "center",
      axisLabel: {
        verticalAlign: "middle",
        align: "center",
        fontSize: 12,
        color: `#bfbfbe`,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    {
      type: "category",
      inverse: true,
      data: yAxisData,
      gridIndex: 2,
      position: "left",
      axisLabel: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#464955",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#464955",
        },
      },
    },
  ],
  series: [
    {
      name: data[0].name, // 图例
      type: "bar",
      barWidth: 30,
      label: {
        position: ["100%", 35], // 统一居右 和 显示到住形体下面
        align: "right",
        offset: [-5, 0], // 偏移
        show: true,
        color: "#fff",

        formatter: function (params) {
          var percent = 0;
          percent = params.value;
          return (
            `{txt| 交通方式:${params.name}}` + "\n" + `同比:{up|${percent}}%`
          );
        },
        rich: {
          txt: {
            fontSize: 12,
            color: "#C2D6E8",
            lineHeight: 20,
          },
          up: {
            fontSize: 12,
            color: "#46E896",
            padding: [0, 0, 0, 0],
          },
        },
      },
      itemStyle: {
        opacity: 0.8,
        color: {
          type: "linear", // 线性渐变
          x: 1, //  范围从 0 - 1，相当于在图形包围盒中的百分比
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#F38D42", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FFC070", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      data: data[0].data,
      showBackground: true, // 是否显示柱条的背景色
      backgroundStyle: {
        // 设置柱条的背景色
        color: "#132A5E",
      },
    },
    {
      name: data[1].name,
      xAxisIndex: 2, // 用其指定所使用的 x 轴
      yAxisIndex: 2, // 用其指定所使用的 y 轴
      type: "bar",
      barWidth: 30,
      label: {
        position: [5, 35], // 通过偏移量来设置标题位置
        show: true,
        // fontFamily: "Rubik-Medium",
        // fontSize: 14,
        // distance: 10,
        color: "#fff",
        formatter: function (params) {
          var percent = 0;
          percent = params.value;
          return (
            `{txt| 交通方式:${params.name}}` + "\n" + `同比:{up|${percent}}%`
          );
        },
        rich: {
          txt: {
            fontSize: 12,
            color: "#C2D6E8",
            lineHeight: 20,
          },
          up: {
            fontSize: 12,
            color: "#46E896",
            padding: [0, 0, 0, 0],
          },
        }, // 富文本
      },
      itemStyle: {
        opacity: 0.8,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#3777B9", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#82C8FF", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      data: data[1].data,
      showBackground: true, // 是否显示柱条的背景色
      backgroundStyle: {
        // 设置柱条的背景色
        color: "#132A5E",
      },
    },
  ],
};