react简述1：react 的地图组件和环形图

基于react-amap的 输入地址动态显示地理位置的需求的实现

地图组件效果图

1. 表单中引入地图组件

ps:经纬度需要初始化，否则组件会崩溃

2.填写地址后，触发定位

handleTextAreaChange = () => {
    console.log(`${this.props.form.getFieldValue('address')}`);
    var result = fetch(
      'http://restapi.amap.com/v3/geocode/geo?key=' +
        MAP_KEY +
        '&address=' +
        `${this.props.form.getFieldValue('address')}`,
      {
        method: 'GET'
      }
    );
    result
      .then(res => {
        return res.json();
      })
      .then(json => {
        console.log(json);
        if (json.geocodes && json.geocodes.length > 0) {
          let position = {
            longitude: json.geocodes[0].location.split(',')[0],
            latitude: json.geocodes[0].location.split(',')[1]
          };
          console.log('position', position);
          this.props.form.setFieldsValue(position);//给表单赋值
        }
      });
  };

ps:使用高德地图web服务的地址编码api,将地址转化为经纬度,可以方便的将经度,维度保存到数据库。

3.地图定位的回显

    const longi = getFieldValue('longitude') || 116.397499;
    const lati = getFieldValue('latitude') || 39.908722;
    console.log('longi', longi);
    console.log('lati', lati);

    const position = {
      longitude: longi,
      latitude: lati
    };

ps:上段代码用于地图组件的初始化和修改操作的回显。

基于echart的动态显示数据的环形图

• 首先简单回顾echart的相关api
  • 关于饼状图的demo实例 环状图
  • 多数情况下，我们需要自定义自已需要的风格，读者参考api
  • 此次环状图主要使用 title,tooltip,legend,series

• 如果需要在环形饼图中间添加数据，只需要在series的label中加入formatter即可。
  例如

  
  
  环形饼图

label: {
            normal: {
              position: 'center',
              formatter: abnormalTotal + '辆',
              textStyle: {
                fontSize: '15',
                color: 'red'
              }
            },

• 最后，动态添加数据，將数据当作property传入组件即可。