import * as React from 'react' ; import echarts from 'echarts' ; interface IChinaMapVal { name : string | number ; value : number | string ; } interface IChinaMap { vaules : ( IChinaMapVal ) [ ] ; } class ChinaMap extends React . Component < IChinaMap , IChinaMap > { constructor ( props , state ) { super ( props , state ) ; this . state = Object . assign ( { } , this . props ) ; } componentWillReceiveProps ( nextProps ) { this . setState ( nextProps , ( ) => { this . initChart ( ) ; } ) ; } componentDidMount ( ) { this . initChart ( ) ; } initChart ( ) { let chart = echarts . init ( document . getElementById ( 'chinaMap' ) , 'macarons' ) ; chart . setOption ( { title : { text : '用户世界分布地图' , left : 'center' , top : 5 , itemGap : 0 , textStyle : { color : '#000' } , z : 200 } , dataRange : { min : 0 , max : 10000 , text : [ 'High' , 'Low' ] , realtime : false , calculable : true , color : [ 'orangered' , 'yellow' , 'lightskyblue' ] } , geo : { map : 'world' , silent : true , label : { emphasis : { show : false , areaColor : '#eee' } } , itemStyle : { normal : { borderWidth : 0.2 , borderColor : '#404a59' } } , roam : false } , series : [ { name : 'World Population (2010)' , type : 'map' , mapType : 'world' , roam : false , mapLocation : { y : 60 } , itemStyle : { emphasis : { label : { show : true } } } , data : this . state . vaules } ] } ) ; } render ( ) { return ( < div id = "chinaMap" style = { { display : 'inline-block' , width : 1000 , height : 500 } } />); } } export default ChinaMap ;