import React from 'react';import ReactCharts from 'echarts-for-react';import $ from 'jquery'import './style.less';export default class ChinaMap extends React.Component {   constructor() {      super();      this.state = {         colors: ["#1AC977", " #00D2AA", "#00D7E1", "#00AAE1", "#0082D2", "#0070B5"],         features:[]      }   }   componentDidMount() {      this.paintChinaMap();   }   componentDidUpdate() {      const colorArray = this.props.patientData.healthRate;      let dataArray = [];      let page = this;      this.state.features.map((key,index)=>{         let item = {};         item.geometry = key.geometry;         item.properties = key.properties;         item.type = key.type;         item.colorindex = colorArray[index+1];         dataArray.push(item);      });      this.state.svg.selectAll("path").data(dataArray).attr("fill", function (d, i) {         const proId = d.properties.id;         const colorIndex = colorArray[proId];         return page.state.colors[colorIndex];      }).on("mouseout", function (d, i) {         d3.select(this)            .attr("fill", function (d, i) {               const proId = d.properties.id;               const colorIndex = colorArray[proId];               return page.state.colors[colorIndex];            })            .attr("stroke-width", 0)      });   }   paintChinaMap() {      const colorArray = this.props.patientData.healthRate;      let conWidth = $(".ChinaMap_chart").width();      let width = conWidth;      let height = conWidth / 1.3;      let page = this;      let svg = d3.select(this.refs.china_chart).append("svg")         .attr("width", width)         .attr("height", height)         .append("g")         .data(colorArray)         .attr("transform", "translate(0,0)");      let projection = d3.geo.mercator()         .center([107, 31])         .scale(750)         .translate([width / 2, height / 2]);      let path = d3.geo.path()         .projection(projection);      let color = d3.scale.category20();      this.setState({         svg:svg      });      d3.json("./js/json/china.json", function (error, root) {         if (error)            return console.error(error);         let dataArray = [];         root.features.map((key,index)=>{            let item = {};               item.geometry = key.geometry;               item.properties = key.properties;               item.type = key.type;               item.colorindex = colorArray[index+1];            dataArray.push(item);         });         page.setState({            features: dataArray         });         svg.selectAll("path")            .data(dataArray)            .enter()            .append("path")            .attr("fill", function (d, i) {               const proId = d.properties.id;               const colorIndex = colorArray[proId];               return page.state.colors[colorIndex];            })            .text(function (d) {               return d.properties.name;            })            .attr("text", function (d, i) {               return d.properties.name;            })            .attr("d", path)            .on("mouseover", function (d, i) {               d3.select(this)                  .attr("stroke", "#fff")                  .attr("stroke-width", 1)            })            .on("mouseout", function (d, i) {               d3.select(this)                  .attr("fill", function (d, i) {                     const proId = d.properties.id;                     const colorIndex = colorArray[proId];                     return page.state.colors[colorIndex];                  })                  .attr("stroke-width", 0)            });      });   }   render() {      return (         
    
      )   }}复制代码