react+echarts实现全国客户数据展示

前言数据可视化一直是热门话题。我们平时做项目的时候，可能都免不了要和图表打交道。好在有很多优秀成熟的数据图表库，比如Echarts、Highcharts，我们可以在里面找到自己需要的图表，方便快捷~需求假设我们有这样一个需求：统计全国客户数据使用可视化解决方案展示。针对这样的需求，更好的解决方案是将客户数据展示在地图上，让你清晰直观的了解客户在全国的分布情况。在本文中，我们主要使用react+echarts来实现。实际操作当然，如果你想在react中使用echarts，你必须先安装npmiechartssecharts就准备好了，现在我们需要找到我们的map文件。怎么说呢，因为现在echarts官网不提供china.js下载。该怎么办？当然是为搜索引擎编程，可以在网上找到。只要熟悉echarts的配置项和API，实现想要的图表还是比较快的。接下来，导入我们的文件并初始化我们的页面：构造函数（道具）{超级（道具）；this.state={data:[]}}componentDidMount(){this.initMap();}//初始化地图initMap=()=>{letmyChart=echarts.init(document.getElementById('myMap'));letoption={tooltip:{formatter:function(e,t,n){returne.seriesName+"
"+e.name+":"+e.value}},visualMap:{分钟:0,max:1000,right:26,bottom:40,showLabel:!0,pieces:[{gt:500,label:"Morethan500",color:"#ED5351"},{gte：200，lte：500，标签：“201-500”，颜色：“#3B5A97”}，{gte：100，lt：200，标签：“101-200”，颜色：“#59D9A5”}，{gt：51，lte：100，标签：“51-100”，颜色：“#F6C021”}，{标签：“1-50”，gt：0，lte：50，颜色：“#6DCAEC”}]，show:!0},geo:{map:"china",roam:!1,scaleLimit:{min:1,max:2},zoom:1.13,layoutCenter:['30%','30%'],//地图中心在屏幕标签上的位置：{正常：{显示：！0，字体大小：“14”，颜色：“rgba（0,0,0,0.7）”}}，itemStyle：{正常：{borderColor：“rgba（0,0,0,0.2）"},强调：{areaColor:"#F5DEB3",shadowOffsetX:0,shadowOffsetY:0,borderWidth:0}}},series:[{name:"客户统计",type:"map",geoIndex:0,data:this.state.data,areaColor:'#0FB8F0'}]};myChart.setOption(选项);window.addEventListener("resize",function(){myChart.resize();});}render(){return(