"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var React = _interopRequireWildcard(require("react"));
var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var AreaStyleChart = function AreaStyleChart(props) {
  var propData = props || {};
  var jsonData = props.data;
  var xdata = [];
  var ydata = [];
  jsonData.map(function (item) {
    xdata.push(item[props.xAxis]);
    ydata.push(item[props.yAxis]);
  });
  var echartsOption = {
    title: {
      //标题
      text: propData.title,
      show: true // 是否显示标题组件
    },

    // backgroundColor: 'rgba(0,0,0,0.65)',
    //   confine: true ,// 超出的部分不会被遮盖
    tooltip: {
      //提示框组件
      trigger: 'axis' //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
    },

    legend: {
      //图例组件
      data: ['天海湾', '鼎龙湾', '珍珠湾', '翠逸家园', '紫林湾']
      // left:'auto'
    },

    color: propData.color,
    //调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 
    grid: {
      //直角坐标系内绘图网格
      left: '3%',
      //grid 组件离容器左侧的距离。
      right: '4%',
      bottom: '3%',
      containLabel: true //grid 区域是否包含坐标轴的刻度标签
    },

    // toolbox: {  //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
    //     feature: { //各工具配置项。
    //         dataView : {show: true, readOnly: false},
    //         magicType : {show: true, type: ['line', 'bar']},
    //         saveAsImage: {} //存取为图片
    //     }
    // },
    xAxis: {
      //直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
      type: 'category',
      //类目轴，
      boundaryGap: false,
      //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
      data: xdata //类目数据，在类目轴（type: 'category'）中有效。
    },

    yAxis: {
      type: 'value',
      //数值轴，适用于连续数据
      axisLabel: {
        //y轴单位
        formatter: function formatter(value, index) {
          return value + ' ' + props.yAxisaxisLabel;
        }
      }
    },
    series: [
    //每个系列通过 type 决定自己的图表类型
    {
      //name:propData.title,
      type: 'line',
      stack: '总量',
      smooth: props.smooth,
      //平滑

      emphasis: {
        focus: 'series'
      },
      data: ydata,
      showSymbol: props.showSymbol,
      //显示点
      label: {
        //显示标签
        show: props.show,
        position: 'top'
      },
      itemStyle: {
        normal: {
          lineStyle: {
            width: props.lineStyle || 2 //设置线条粗细
          }
        }
      },

      areaStyle: {
        // 透明度 具体颜色
        normal: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0.1,
              color: props.colorx // 0% 处的颜色
            }, {
              offset: 0.5,
              color: props.colory // 0% 处的颜色
            }, {
              offset: 0.7,
              color: props.colorx2 // 0% 处的颜色
            }, {
              offset: 0.9,
              color: props.colory2 // 100% 处的颜色
            }],

            globalCoord: false // 缺省为 false
          }
        }
      }
    }]
  };

  return /*#__PURE__*/React.createElement(_echartsForReact["default"], {
    option: echartsOption,
    theme: "clear",
    style: {
      height: props.height,
      width: props.width
    }
  });
};
var _default = AreaStyleChart;
exports["default"] = _default;