utils-echart/dist/types/utils-echarts/create-echarts/mix-charts.ts

Echart component

import { defaultMultipleDataWithName } from "../assets/common";
import { getMultipleDataWithName, val, splitLineX, splitLineY, adaptiveS } from "../methods/methods";

/** 混合图表 */
export class MixCharts {
  /**
   * 获取混合图表数据
   * @param xAxis x轴
   * @param name 名称
   * @param range 数据范围
   * @returns obj
   */
  static getMixChartsData(xAxis: string[], name: string[], range?: number[]) {
    return getMultipleDataWithName(xAxis, name, range);
  }

  /**
   * 混合图表0
   * @param obj 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static mixCharts0(obj?: any, colorArr?: any[]) {
    const o = obj ? obj : defaultMultipleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const s: any[] = [];

    o.data.forEach((e: any) => {
      s.push({
        value: e.value,
        name: e.name,
      });
    });

    console.log(s);

    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      legend: val("legend"),
      grid: val("grid"),
      tooltip: { trigger: "axis" },
      xAxis: {
        type: "category",
        data: o.xAxis,
        axisLine: {
          show: true,
        },
        axisTick: {
          show: false,
        },
        splitLine: splitLineX(),
      },
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: false,
          },
          splitLine: splitLineY(),
        },
        {
          type: "value",
          alignTicks: false,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value}%", //以百分比显示
          },
        },
      ],
      series: [
        {
          name: s[0].name,
          data: s[0].value,
          type: "line",
          smooth: false,
          yAxisIndex: 1,
          itemStyle: {
            color: _colorArr[0],
          },
        },
        {
          name: s[1].name,
          data: s[1].value,
          type: "bar",
          barMaxWidth: 30,
          yAxisIndex: 0,
          itemStyle: {
            color: _colorArr[1],
          },
        },
      ],
    };
    console.log(option);

    return option;
  }

  /**
   * 混合图表1
   * @param obj 数据
   * @param name 系列名称
   * @param colorArr 颜色组
   * @returns option
   */
  static mixCharts1() {
    const option = {
      backgroundColor: val("backgroundColor"),
      color: val("colorData"),
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        right: "5%",
        top: "0%",
        icon: "rect",
        itemGap: adaptiveS(30),
        itemHeight: adaptiveS(6),
        itemWidth: adaptiveS(14),
        textStyle: {
          fontSize: adaptiveS(14),
          color: val("fontColor"),
        },
      },
      grid: val("grid"),
      yAxis: [
        {
          type: "value",
          axisLabel: {
            color: "rgba(163, 164, 165, 1)",
            fontSize: adaptiveS(10),
          },
          splitLine: {
            lineStyle: {
              color: ["rgba(55, 55, 55, 0.4800)"],
            },
          },
        },
        {
          type: "value",
          alignTicks: false,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "rgba(163, 164, 165, 1)",
            formatter: "{value}%",
            fontSize: adaptiveS(10),
          },
        },
      ],
      xAxis: {
        type: "category",
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "rgba(163, 164, 165, 1)",
        },
        axisTick: {
          alignWithLabel: true,
        },
        data: ["8:16", "8:17", "8:18", "8:19", "8:20", "8:21"],
      },
      series: [
        {
          name: "生活用电",
          type: "bar",
          stack: "total",
          barWidth: 15,
          yAxisIndex: 0,
          emphasis: {
            focus: "series",
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: "rgba(21, 21, 21, 1)",
          },
          data: [320, 302, 301, 334, 390, 330],
        },
        {
          name: "生活用电",
          type: "line",
          smooth: 0.4,
          yAxisIndex: 1,
          showSymbol: false,
          data: [50, 40, 35, 65, 45, 55],
        },
        {
          name: "生产用电",
          type: "bar",
          stack: "total",
          yAxisIndex: 0,
          emphasis: {
            focus: "series",
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: "rgba(21, 21, 21, 1)",
          },
          data: [120, 132, 101, 134, 90, 230],
        },
        {
          name: "生产用电",
          type: "line",
          smooth: 0.4,
          yAxisIndex: 1,
          showSymbol: false,
          data: [30, 20, 10, 40, 20, 15],
        },
        {
          name: "公共用电",
          type: "bar",
          stack: "total",
          yAxisIndex: 0,
          emphasis: {
            focus: "series",
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: "rgba(21, 21, 21, 1)",
          },
          data: [220, 182, 191, 234, 290, 330],
        },
        {
          name: "公共用电",
          type: "line",
          smooth: 0.4,
          yAxisIndex: 1,
          showSymbol: false,
          data: [90, 80, 60, 70, 40, 0],
        },
      ],
    };

    return option;
  }
}