import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["title", "xAxis", "series", "yAxis", "legend", "yFunc"];
/*
 * @Author: wangrongrong wangrongrong@bigo.sg
 * @Date: 2022-05-27 17:08:35
 * @LastEditors: wangrongrong wangrongrong@bigo.sg
 * @LastEditTime: 2023-03-22 12:31:54
 * @FilePath: /lowcode-material/devopsComponent/src/components/echart-bar-component/echart-line-component.tsx
 * @Description: echart-bar图表
 */
import React from 'react';
import "./index.css";
import EChartsReact from 'echarts-for-react';
;
var colors = ['#5470C6', '#91CC75', '#EE6666'];
var EchartBarMutiyComponent = function EchartBarMutiyComponent(props) {
  var _props$title = props.title,
    title = _props$title === void 0 ? '多y轴图' : _props$title,
    _props$xAxis = props.xAxis,
    xAxis = _props$xAxis === void 0 ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] : _props$xAxis,
    _props$series = props.series,
    series = _props$series === void 0 ? [{
      name: 'Evaporation',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    }, {
      name: 'Precipitation',
      type: 'bar',
      yAxisIndex: 1,
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    }, {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 2,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }] : _props$series,
    _props$yAxis = props.yAxis,
    yAxis = _props$yAxis === void 0 ? [{
      type: 'value',
      name: 'Evaporation',
      position: 'right',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      }
    }, {
      type: 'value',
      name: 'Precipitation',
      position: 'right',
      alignTicks: true,
      offset: 80,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[1]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      }
    }, {
      type: 'value',
      name: '温度',
      position: 'left',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[2]
        }
      },
      axisLabel: {
        formatter: '{value} °C'
      }
    }] : _props$yAxis,
    _props$legend = props.legend,
    legend = _props$legend === void 0 ? ['Evaporation', 'Precipitation', 'Temperature'] : _props$legend,
    _props$yFunc = props.yFunc,
    yFunc = _props$yFunc === void 0 ? function (a) {
      return a;
    } : _props$yFunc,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  var option = {
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    toolbox: {
      feature: {
        dataView: {
          show: true,
          readOnly: false
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    title: {
      text: title
    },
    legend: {
      data: legend
    },
    grid: {
      right: '10%',
      left: '5%'
    },
    xAxis: [{
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      data: xAxis
    }],
    yAxis: yAxis,
    series: series
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "Echarts"
  }, /*#__PURE__*/React.createElement(EChartsReact, {
    option: option
  }));
};
export default EchartBarMutiyComponent;