SmartCommunity/operationSupport/src/views/newWorkBench/components/indexOptionChart.js

//从左往右颜色渐变
export const GradualChange = (color1, color2) => {
  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
    { offset: 1, color: color1 + '' },
    { offset: 0, color: color2 + '' || color1 + '' }
  ]);
};
export const getColor = ([color1, color2]) => {
  // 右 下 左 上
  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: color1 + '' },
    { offset: 1, color: color2 + '' || color1 + '' },
  ])
}

export const dateType = (date) => {
  let val = '';
  if (date) {
    val = `${date.slice(0, 4)}年${date.slice(4)}月`
  } else {
    val = date
  }
  return val
}
//折现波浪线颜色渐变
export const 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 defaultMonth = ['01', "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];

const defaultColor = [GradualChange('#22D8FF', '#00B2FF'),
GradualChange('#F0646C', '#F4994E'),
GradualChange('#5EEDCC ', '#24C3F1'),
GradualChange('#7178FF', '#D2A4FF'),
GradualChange('#884DD2', '#DF63CC')]
export const ringType = (
  color = [],
  data = [],
  title = {},
  legendFcuntion = {}
) => {
  let legendFcuntionValue = (v) => {
    let val = ''
    data.map(item => {
      if (item.name == v) {
        if (legendFcuntion.type == '%') {
          val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`
        } else {
          val = `{a|${v}} · · · · · · {b|${item.value}}`
        }
      }
    })
    return val

  }
  return {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 80,
      itemGap: 10,
      itemWidth: 12, // 图例图形宽度
      itemHeight: 8,
      type: 'scroll',
      formatter: (v) => { return legendFcuntionValue(v) },
      textStyle: {
        rich: {
          a: {
            fontSize: 12,
            color: '#858892',
            padding: [0, 5, 0, 0]
          },
          b: {
            fontSize: 14,
            color: '#fff',
            padding: [0, 0, 0, 5]
          }
        }
      }
    },
    title,
    color: !!color.length ? color : defaultColor,
    series: [
      {
        type: 'pie',
        radius: ['55%', '70%'],
        avoidLabelOverlap: false,
        center: ['25%', '50%'],
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  }
}


// 折现波浪
export const discountedWave = (
  name = "",
  xAxis = [],
  series = [],
  legendShow = false,
  color = [],
) => {
  let option = {
    tooltip: {
      trigger: "axis",
      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: 50,
      left: 5,
      bottom: 0,
      right: 5,
      containLabel: true
    },

    legend: {
      show: legendShow,
      icon: "circle",
      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(5)
        },
        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: 4,
      axisLine: {
        show: false
      },
      name: name,
      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.2
        }
      }
    },
    series: [
      {
        // name: "设备告警",
        type: "line",
        smooth: true,
        symbol: "circle", // 实心
        symbolSize: 1, // 设定实心点的大小
        itemStyle: getItemStyle("#5EEDCC", "#24C3F1"),
        data: series,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(36,121,253,0.1)"
              },
              {
                offset: 1,
                color: "rgba(19,194,247,0.3)"
              }
            ])
          }
        },
        lineStyle: {
          width: 1
        }
      },
    ]

  };
  return option;
};


//柱状  
export const columnOptionsChart = (
  name = "",
  xAxis = [],
  series = [],
  color = [],
  barWidth = 6
) => {
  let defaultData = [{
    name: '', type: 'bar', data: []
  }]
  let defaultColor = [['#0EAEFF', '#85E9FF'], ['#F0646C', '#F4994E']]
  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.value.toFixed(2)}</span>
                      </p>`;
        });
        el += `</div>`;
        return el;
      }
    },
    grid: {
      top: 50,
      left: 0,
      bottom: 0,
      right: 0,
      containLabel: true
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: false // 不显示坐标轴
      },
      axisTick: {
        show: false // 不显示坐标轴刻度
      },
      axisLabel: {
        formatter: function (params, index) {
          if (params.length == 2) {
            return params + '月';
          } else {
            return params.slice(5) + '月';
          }

        },
        color: "#9B9DA5",
        margin: 15
      },
      data: !!xAxis.length ? xAxis : defaultMonth
    },
    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: {
      show: false,
      x: 'right',
      icon: "circle",
      itemWidth: 8, // 图例图形宽度
      itemHeight: 8,
      itemGap: 20
    },
    series: seriesConfiguration() || defaultData
  };
  return option;
}