// 核心库
import React, { Component } from "react";
import { connect } from "dva";
import { withRouter } from "dva/router";
import echarts from "echarts";

class MonthDanger extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      riskLevelData: [],
    };
  }

  componentDidMount() {
    console.log(this.props.ListC, "000000");
    let xData = [];
    let ydata = [];
    let sourceName = [];
    this.props.ListC.map((item) => {
        let name = item.NAME.split(",");
        xData.push(name);
        sourceName.push(item.SOURCENAME);
        let valu = item.Val.split(",");
        ydata.push(valu);
      });
      let safeInspections = document.getElementById("monthdanger");
      if (safeInspections) {
        let myChart = echarts.init(safeInspections);
        myChart.setOption(
          {
            color: ["#72b85b", "#f6841a", "#cc0404", "#4285F4"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
              transitionDuration: 0,
              formatter: function (params) {
                return (
                  params[0].name +
                  "</br>" +
                  params[0].marker +
                  params[0].seriesName +
                  " : " +
                  params[0].value +
                  "</br>" +
                  params[1].marker +
                  params[1].seriesName +
                  " : " +
                  params[1].value +
                  "</br>" +
                  params[2].marker +
                  params[2].seriesName +
                  " : " +
                  params[2].value +
                  "</br>" +
                  params[3].marker +
                  params[3].seriesName +
                  " : " +
                  params[3].value +
                  "%"
                );
              },
            },
            grid: {
              left: "10%",
              // right: "10%",
              bottom: "15%",
              top: "5%",
              containLabel: true,
              z: 22,
            },
            xAxis: {
              type: "category",
              data: xData[0],
              axisLine: {
                lineStyle: {
                  color: "#0c3b71",
                },
              },
              axisLabel: {
                show: true,
                color: "rgb(170,170,170)",
                interval: 0,
                textStyle: {
                  lineHeight: 14,
                },
              },
            },
            legend: {
              data: sourceName,
              left: "center",
              align: "left",
              bottom: "2%",
              textStyle: {
                color: "#000",
              },
              itemWidth: 10,
              itemHeight: 10,
              // itemGap: 35,
            },
            yAxis: [
              {
                type: "value",
                position: "left",
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: ["#f2f2f2"],
                    // opacity:0.2
                    // zlevel: -1,
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#0c3b71",
                  },
                },
                axisLabel: {
                  color: "rgb(170,170,170)",
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                position: "right",
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: ["#f2f2f2"],
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#f2f2f2",
                  },
                },
                axisLabel: {
                  color: "rgb(170,170,170)",
                  formatter: "{value} %",
                },
              },
            ],
            series: [
              {
                name: sourceName[0],
                type: "bar",
                data: ydata[0],
                barWidth: "20%",
                barGap: "10%",
                stack: null,
              },
              {
                name: sourceName[1],
                type: "bar",
                data: ydata[1],
                barWidth: "20%",
                barGap: "10%",
                stack: null,
              },
              {
                name: sourceName[2],
                type: "bar",
                data: ydata[2],
                barWidth: "20%",
                barGap: "10%",
                stack: null,
                // zlevel: 99,
              },
              {
                name: sourceName[3],
                type: "line",
                data: ydata[3],
                yAxisIndex: 1,
                // zlevel:100,
              },
            ],
          },
          true
        );
      }
    
  }

  render() {
    return (
      <React.Fragment>
        <div
          id="monthdanger"
          style={{
            width: "100%",
            height: "75%",
            // minHeight: "180px",
          }}
        ></div>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(MonthDanger));
