"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = Charts;
var _antd = require("antd");
var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
 * 左侧3个echart
 */

function Charts(_ref) {
  var gpsSpeed = _ref.gpsSpeed,
    mileage = _ref.mileage;
  var gauge = {
    series: [{
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 180,
      splitNumber: 6,
      radius: '90%',
      center: ['50%', '50%'],
      itemStyle: {
        color: '#5AD8A6'
      },
      progress: {
        show: true,
        width: 4,
        itemStyle: {
          color: '#5AD8A6'
        }
      },
      pointer: {
        length: '60%',
        width: 2
      },
      axisLine: {
        lineStyle: {
          width: 4
          // color: [[1, '#999']],
        }
      },

      axisTick: {
        splitNumber: 1,
        lineStyle: {
          width: 1,
          color: '#999'
        }
      },
      splitLine: {
        length: 4,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      },
      data: [{
        value: 100
      }]
    }]
  };
  // let liquidFill = {
  //     series: [
  //         {
  //             type: 'liquidFill',
  //             radius: '100%',
  //             z: 1,
  //             center: ['50%', '50%'],
  //             data: [0.5],
  //             label: {
  //                 show: false,
  //             },
  //             backgroundStyle: {
  //                 borderWidth: 1,
  //                 color: 'rgba(255, 255, 255,0.2)',
  //                 borderColor: 'rgba(255, 255, 255,0.2)',
  //             },
  //             outline: {
  //                 show: true,
  //                 itemStyle: {
  //                     borderWidth: 0,
  //                 },
  //                 borderDistance: 0,
  //             },
  //             color: ['#F6BD16'],
  //         },
  //     ],
  // };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-chart"
  }, /*#__PURE__*/_react["default"].createElement(_echartsForReact["default"], {
    option: gauge,
    notMerge: true,
    lazyUpdate: true,
    style: {
      height: '100%',
      width: '100%'
    }
  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-name"
  }, "\u5F53\u524D\u901F\u5EA6"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-value"
  }, /*#__PURE__*/_react["default"].createElement("span", null, gpsSpeed), "km/h"))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-chart",
    style: {
      height: '70px',
      width: '100%'
    }
  }, "\u56FE\u6807"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-name"
  }, "\u5269\u4F59\u6CB9\u91CF"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-value"
  }, /*#__PURE__*/_react["default"].createElement("span", null, "30"), "L"))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item",
    style: {
      marginTop: '24px'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-chart"
  }, /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
    width: 68,
    type: "circle",
    status: "normal",
    strokeLinecap: "butt",
    percent: 75,
    strokeColor: '#5AD8A6',
    strokeWidth: 8
  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-name"
  }, "\u4ECA\u65E5\u884C\u9A76"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "car-base-left--charts-item-value"
  }, /*#__PURE__*/_react["default"].createElement("span", null, mileage), "km"))));
}
//# sourceMappingURL=Charts.js.map
