Project-Annex/energyManagement/src/views/overview/EachartOptions.js

const getColor = ([color1, color2]) => {
  // 右 下 左 上
  let colorVa =
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: color1 + '' },
      { offset: 1, color: color2 + '' || color1 + '' },
    ])
  return colorVa
}
const defaultColor = [['#0EAEFF', '#85E9FF'], ['#F0646C', '#F4994E']]

const dateType = (date) => {
  let val = '';
  if (date) {
    val = `${date.slice(0, 4)}年${date.slice(4)}月`
  } else {
    val = date
  }
  return val
}
export const columnOptionsChart = (
  name = "",
  xAxis = [],
  series = [],
  color = [],
  barWidth = 6
) => {
  let defaultData = [{
    name: '', type: 'bar', data: []
  }]
  let seriesConfiguration = () => {
    let seriesData = [];
    series.map((item, index) => {
      seriesData.push({
        name: item.name,
        type: 'bar',
        data: item.data,
        barWidth: barWidth,
        itemStyle: {
          normal: {
            barBorderRadius: [15, 15, 0, 0],
            color: getColor(color[index] || defaultColor[index]),
          }
        },
        barGap: '100%'
      })
    })

    return seriesData
  }
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        shadowStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(31,207,245,0)" // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
              },
              {
                offset: 0.2,
                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(31,207,245,0.05)"
              }
            ],
            global: false // 缺省为 false
          }
        },
        crossStyle: {
          shadowBlur: 30,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },
      extraCssText:
        "background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px",
      textStyle: {
        fontSize: 12,
        color: "#FFFFFF"
      },
      formatter(param) {
        let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${dateType(param[0].axisValue)}</h4>`;
        param.forEach(item => {
          el += `<p style="text-align: left;">
          <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
            ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
                        <span>${item.seriesName}：${item.seriesName == '环比增长' ? (item.value * 100 || 0) + '%' : item.value || 0}</span>
                      </p>`;
        });
        el += `</div>`;
        return el;
      }
    },
    grid: {
      top: 30,
      left: 0,
      bottom: 0,
      right: 0,
      containLabel: true
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: false // 不显示坐标轴
      },
      axisTick: {
        show: false // 不显示坐标轴刻度
      },
      axisLabel: {
        formatter: function (params, index) {
          return params.slice(4) + '月';
        },
        color: "#9B9DA5",
        margin: 15
      },
      data: xAxis
    },
    yAxis: {
      type: "value",
      splitNumber: 4,
      name: name,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#9B9DA5",
        margin: 15,
        textStyle: {
          align: "right",
          baseline: "middle"
        }
      },
      nameLocation: "end",
      nameTextStyle: { color: "#9B9DA5", padding: [0, 0, 0, -40] },
      splitLine: {
        lineStyle: {
          type: "dotted",
          width: 0.5
        }
      }
    },
    legend: {
      x: 'right',
      icon: "circle",
      itemWidth: 8, // 图例图形宽度
      itemHeight: 8,
      itemGap: 20
    },
    series: seriesConfiguration() || defaultData
  };
  return option;
}


function getItemStyle(c1, c2) {
  return {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: c1 // 0% 处的颜色
        },
        {
          offset: 1,
          color: c2 // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false
    }
  };
}
export const clientOptionsChart = (
  title = "",
  xAxis = [],
  series = [],
  color = [],
  data = ""
) => {
  let option = {
    tooltip: {
      trigger: "axis",
      extraCssText:
        "background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px",
      textStyle: {
        fontSize: 12,
        color: "#FFFFFF"
      },
      formatter(param) {
        let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
        param.forEach(item => {
          el += `<p>
                        <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left, 
                          ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
                        <span>${item.seriesName}：${item.value}</span>
                      </p>`;
        });
        el += `</div>`;
        return el;
      }
    },
    grid: {
      top: 40,
      left: 0,
      bottom: 6,
      right: 0,
      containLabel: true
    },
    legend: {
      icon: "circle",
      data: ["正常", "异常", "未启用", "报废"],
      x: "right", // 可设定图例在左、右、居中
      itemWidth: 8, // 图例图形宽度
      itemHeight: 8,
      itemGap: 20
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: false // 不显示坐标轴
      },
      axisTick: {
        show: false // 不显示坐标轴刻度
      },
      axisLabel: {
        formatter: function (params, index) {
          return params.slice(4) + '月';
        },
        color: "#9B9DA5",
        margin: 16
      },
      data: xAxis,
      axisPointer: {
        type: "shadow",
        shadowStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(31,207,245,0)" // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
              },
              {
                offset: 0.2,
                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(31,207,245,0.05)"
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    },
    yAxis: {
      type: "value",
      splitNumber: 6,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#9B9DA5",
        margin: 15,
        textStyle: {
          align: "right",
          baseline: "middle"
        }
      },
      nameLocation: "end",
      nameTextStyle: { color: "#9B9DA5", padding: [0, 0, 0, -50] },
      splitLine: {
        lineStyle: {
          type: "dotted",
          width: 0.2
        }
      }
    },
    series: [
      {
        name: "正常",
        type: "line",
        smooth: true,
        symbol: "circle", // 实心
        symbolSize: 1, // 设定实心点的大小
        itemStyle: getItemStyle("#5EEDCC", "#24C3F1"),
        data: data.normal,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(36,121,253,0.08)"
              },
              {
                offset: 1,
                color: "rgba(19,194,247,0.05)"
              }
            ])
          }
        },
        lineStyle: {
          width: 1
        }
      },
      {
        name: "异常",
        type: "line",
        smooth: true,
        symbol: "circle", // 实心
        symbolSize: 1, // 设定实心点的大小
        itemStyle: getItemStyle("#FE9156", "#FE5760"),
        data: data.abnormal,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(254,87,96,0.08)"
              },
              {
                offset: 1,
                color: "rgba(254,145,86,0.05)"
              }
            ])
          }
        },
        lineStyle: {
          width: 1
        }
      },
      {
        name: "未启用",
        type: "line",
        smooth: true,
        symbol: "circle", // 实心
        symbolSize: 1, // 设定实心点的大小
        itemStyle: getItemStyle("#7178FF", "#D2A4FF"),
        data: data.unused,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(133,65,249,0.08)"
              },
              {
                offset: 1,
                color: "rgba(227,79,153,0.05)"
              }
            ])
          }
        },
        lineStyle: {
          width: 1
        }
      },
      {
        name: "报废",
        type: "line",
        smooth: true,
        symbol: "circle", // 实心
        symbolSize: 1, // 设定实心点的大小
        itemStyle: getItemStyle("#E34F99", "#8541F9"),
        data: data.scrap,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(133,65,249,0.08)"
              },
              {
                offset: 1,
                color: "rgba(227,79,153,0.05)"
              }
            ])
          }
        },
      }
    ]
  };
  return option;
};