hair/src/views/report/Advertisement/Charts.js

import echarts from "../../../utils/echarts";

let ringEcharts = undefined;
let barEcharts = undefined;
let tbEcharts = undefined;

export function advertisementSpendInit(ele, list) {
  // 柱图
  barEcharts && barEcharts.clear && barEcharts.clear();
  if (!barEcharts) barEcharts = echarts.init(ele);
  barEcharts.setOption({
    tooltip: {
      valueFormatter: e => {
        return "环比：" + (e.toFixed(2) - 0) + "%";
      },
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      top: "40px",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      data: list.L.map(v => v.date),
      axisLine: { onZero: true },
      splitLine: { show: false },
      splitArea: { show: false },
      axisLabel: {
        interval: 0,
        rotate: 40,
      },
    },
    yAxis: {
      axisLabel: {
        formatter: e => {
          let N = e || 0;
          return N + "%";
        },
      },
    },
    series: [
      {
        name: list.L[0].type,
        type: "bar",
        stack: list.L[0].type,
        itemStyle: {
          color: "#91cc75",
        },
        label: {
          // 柱图头部显示值
          show: true,
          position: "top",
          color: "#333",
          fontSize: "12px",
          formatter: params => {
            return params.value.toFixed(2) - 0 + "%";
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0,0,0,0.3)",
          },
        },
        data: list.L.map(v => v.value),
      },
    ],
  });
}

export function advertisementRingRatioInit(ele, list) {
  // 折线图
  ringEcharts && ringEcharts.clear && ringEcharts.clear();
  if (!ringEcharts) ringEcharts = echarts.init(ele);
  let keys = list.F.length > list.L.length ? list.F : list.L;
  ringEcharts.setOption({
    tooltip: {
      trigger: "axis",
      formatter(e) {
        let out = "";
        for (let i = 0; i < (e || []).length; i++) {
          const v = (e || [])[i];
          let month = (v.axisValue || "").split("-");
          month = month.reverse()[0];
          let N = v.value || 0;
          if (N >= 100000000) N = (N / 100000000).toFixed(2) - 0 + "亿";
          else if (N >= 10000) N = (N / 10000).toFixed(2) - 0 + "万";
          out += v.seriesName + "-" + month + ": " + N + "<br />";
        }
        return out;
      },
    },
    legend: {
      data: [list.F[0].type, list.L[0].type],
      top: "10px",
    },
    grid: {
      top: "40px",
      left: "3%",
      right: "6%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: keys.map(v => v.date),
    },
    yAxis: {
      type: "value",
      scale: true,
      axisLabel: {
        formatter: e => {
          let N = e || 0;
          if (N >= 100000000) N = (N / 100000000).toFixed(2) - 0 + "亿";
          else if (N >= 10000) N = (N / 10000).toFixed(2) - 0 + "万";
          return N;
        },
      },
    },
    series: [
      {
        name: list.F[0].type,
        type: "line",
        stack: "F",
        showSymbol: false,
        data: list.F.map(v => v.value),
      },
      {
        name: list.L[0].type,
        type: "line",
        stack: "L",
        showSymbol: false,
        data: list.L.map(v => v.value),
      },
    ],
  });
}

export function advertisementFeeInit(ele, list) {
  // 折线图
  tbEcharts && tbEcharts.clear && tbEcharts.clear();
  if (!tbEcharts) tbEcharts = echarts.init(ele);
  let keys = list.F.length > list.L.length ? list.F : list.L;
  tbEcharts.setOption({
    tooltip: {
      trigger: "axis",
      formatter: a => {
        let t = list.L[a[0].dataIndex] || undefined;
        let t1 = list.F[a[1].dataIndex] || undefined;
        if (!t) return "";
        return (
          t.t +
          ": " +
          (t.value.toFixed(2) - 0 + "%") +
          "<br/>" +
          t1.t +
          ": " +
          (t1.value.toFixed(2) - 0 + "%")
        );
      },
    },
    legend: {
      data: [list.F[0].type, list.L[0].type],
      top: "30px",
    },
    grid: {
      top: "60px",
      left: "3%",
      right: "6%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: keys.map(v => v.date),
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: e => {
          let N = e || 0;
          if (N >= 100000000) N = (N / 100000000).toFixed(2) - 0 + "亿";
          else if (N >= 10000) N = (N / 10000).toFixed(2) - 0 + "万";
          return N + "%";
        },
      },
    },
    series: [
      {
        name: list.F[0].type,
        type: "line",
        stack: "Total",
        showSymbol: false,
        data: list.F.map(v => v.value),
      },
      {
        name: list.L[0].type,
        type: "line",
        stack: "Total",
        showSymbol: false,
        data: list.L.map(v => v.value),
      },
    ],
  });
}