ECS / ECS_EquipmentMangaSystem_BingChengTaiGuang · Files

var warehouseHealthOption = {
  color: ["rgb(3, 205, 249)", "rgb(210, 252, 60)", "#f43d33"],
  tooltip: {
    trigger: "axis",
    // 鼠标放上去显示百分比
    // formatter: '{c}%',
    formatter: function(params) {
      var result = params[0].name + "<br>";
      params.forEach(function(item) {
        if (item.value) {
          result += item.marker + "  " + item.value + "%</br>";
        } else {
          result += item.marker + "   - </br>";
        }
      });
      return result;
    },
    axisPointer: {
      // Use axis to trigger tooltip
      type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  legend: {},
  grid: {
    top: "18%",
    left: "1%",
    right: "3%",
    bottom: "1%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    axisLabel: {
      textStyle: {
        color: "#fff",
      },
    },
    axisLine: {
      lineStyle: {
        color: "#afa3a3", // X轴线的颜色
        width: 1, // x轴线的宽度
      },
    },
    data: [],
  },

  yAxis: {
    type: "value",
    min: 0, //最小百分比
    max: 100, //最大百分比
    splitLine: true,
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLabel: {
      show: true,
      interval: "auto",
      formatter: "{value}%", //y轴数值，带百分号
      textStyle: {
        color: "#fff",
      },
    },

    axisLine: {
      lineStyle: {
        color: "#afa3a3", // y轴线的颜色
        width: 1, // y轴线的宽度
      },
    },
  },

  series: [
    {
      type: "bar",
      barWidth: "23%",
      stack: "Ad",
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        normal: {
          label: {
            show: false, //开启显示数值
            formatter: function(params) {
              //标签内容
              return params.value + "%";
            },
            position: "bottom", //数值在上方显示
            textStyle: {
              //数值样式
              color: "#fff", //字体颜色
              fontSize: 19, //字体大小
            },
          },
        },
      },
      data: [],
    },
    {
      type: "bar",
      stack: "Ad",
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        normal: {
          label: {
            show: false, //开启显示数值
            formatter: function(params) {
              //标签内容
              return params.value + "%";
            },
            position: "bottom", //数值在上方显示
            textStyle: {
              //数值样式
              color: "#000000", //字体颜色
              fontSize: 10, //字体大小
            },
          },
        },
      },
      data: [],
    },
    {
      type: "bar",
      stack: "Ad",
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示数值
            formatter: function(params) {
              //标签内容
              return params.value + "%";
            },
            position: "top", //数值在上方显示
            textStyle: {
              //数值样式
              color: "#ffff", //字体颜色
              // fontSize: 10, //字体大小
            },
          },
        },
      },
      data: [],
    },
  ],
};
var WarehouseTrendChartOpton = {
  title: {
    left: 10,
    top: 10,
    text: "當月各自倉運行趨勢圖",
    textStyle: {
      color: "aliceblue",
      fontSize: 12,
      // fontStyle: 'oblique',
    },
  },
  tooltip: {
    show: true,
    trigger: "axis",
    // 鼠标放上去显示百分比
    formatter: function(params) {
      var relVal = params[0].name; //x轴对应的名字
      for (var i = 0, l = params.length; i < l; i++) {
        //legend对应的名字
        relVal += "<br/>" + params[i].marker + params[i].seriesName + ": " + params[i].value + "%";
      }
      return relVal;
    },
    // formatter: '{b0}<br/>{a0}: {c0}%<br />',
  },

  legend: {
    show: true,
    data: [],
    top: 10,
    right: 10,
    itemHeight: 8,
    itemWidth: 12,

    textStyle: {
      //图例字体大小
      fontSize: 8,
      fontWeight: "bolder",
      color: "aliceblue",
    },
  },
  grid: {
    left: "3%",
    top: "20%",
    right: "4%",
    bottom: "3%",
    // 是否显示刻度标签
    containLabel: true,
  },

  xAxis: {
    type: "category",
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        color: "#fff",
      },
    },
    axisLine: {
      lineStyle: {
        color: "#fff", // X轴线的颜色
        width: 1, // x轴线的宽度
      },
    },
    data: [],
  },
  yAxis: {
    //y轴大小值
    min: 0,
    //最大值根据 data显示最高高度
    // max: function(value) {
    // 	return value.max
    // },
    max: 100,
    type: "value",
    // 百分比
    axisLabel: {
      formatter: "{value} %",
      textStyle: {
        color: "#fff",
      },
    },
    axisLine: {
      // 坐标轴 轴线
      // symbol: ['none', 'arrow'], // 是否显示轴线箭头
      show: true, // 是否显示
      lineStyle: {
        color: "#fff", // y轴线的颜色
        width: 1, // y轴线的宽度
      },
    },
    axisTick: {
      // 坐标轴的刻度
      show: true, // 是否显示
      inside: false, // 是否朝内
      length: 5, // 长度
      lineStyle: {
        color: "#ccc", // 默认取轴线的颜色
        width: 1,
        type: "solid",
      },
    },
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ],
};

//需要用到的页面 接收 import {xxOption} from '../static/echartsConfig'