map放大或者移动地图坐标点不跟随地图移动，发生错位

[zhongning7924]

//基础配置 参考 http://echarts.baidu.com/demo.html#effectScatter-map
//初始的状态，
 mapoption: mapoption,

需要动态显示地图上点指标内容，比如下单量、支付量等，因此需要清空实例重新渲染
this.refs[name] && this.refs[name].getEchartsInstance().clear()
//调用完成后重新设置option数据

  this.setState({
          mapoption: mapoption,
    })
此时放大或者移动地图坐标点不跟随地图移动，再不清空实例的情况下是好用的。

 //调用
 <div className="col-md-12">
       <ReactEcharts
             ref="mapoption"
             option={this.state.mapoption}
             style={{height: '1200px', width: '100%'}}/>  

 </div>

[hustcc]

有错误截图或者异常的错误信息吗？

[zhongning7924]

没有警告或者错误信息，我换了个调用方法，用dispose销毁实例就可以了，

this.refs['mapoption'] && this.refs['mapoption'].getEchartsInstance().dispose()

[hustcc]

其实不用 clear 的吧？

[zhongning7924]

地图的那个titile是动态取得，我本来也是以为变化了之后重新setState就可以，但是数据发了变化但是鼠标滑到点上显示的名称都没有变化，需要clear之后才变化。

           mapoption.series[0].name = title;
            mapoption.series[0].data =  showDataList;
            mapoption.visualMap.min = min;
            mapoption.visualMap.max = max;
            mapoption.series[1].data =  top5Data;
            mapoption.series[1].name = 'Top5' + title;
  

[hustcc]

这个感觉可能是 echarts 的一个 bug，重新 setOption 之后，title 没有重新渲染。

[zhongning7924]

但是在他们给的例子上随便改titile名称是变化的，不知道咋搞得。。。

[hustcc]

你使用的地图是这样类型的图表吗？

[zhongning7924]

http://echarts.baidu.com/demo.html#effectScatter-map跟这个一样的

[hustcc]

我测试了一下，确定是 echarts map 的 bug，我到 echarts 下面提一下 issue 试一下。

[zhongning7924]

好，感谢~

[hustcc]

没事，先关闭了，可以关注我在 echarts 上提的 issue。

[hustcc]

应该是你自己代码的问题，这个 demo 实现了修改 title。不是这个项目的 bug，也不是 echarts 的 bug。

http://git.hust.cc/echarts-for-react/#/echarts/map?_k=fs754i

[zhongning7924]

抱歉之前问题没描述清楚，修改的不是标题title，而是鼠标到点上之后tooltip显示名称，具体为series里面的name设置，该问题不止是地图里面，在pie，bar等里面改变series里面的name重新设置option都不生效，
图表的设置如下。

//option基础配置     
var option = {
    backgroundColor: '#404a59',
    tooltip : {
        trigger: 'item',
        formatter: function (params) {
            return '<p>'+params.seriesName+'</p>' + params.name + ' : ' + params.value[2];
        }
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        textStyle: {
            color: '#fff'
        }
    },
    grid:{
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

    visualMap: {
        show: false,
        min: 0,
        max: 0,
        inRange: {
            symbolSize: [4, 35]
        }
    },    
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series : [
        {
            name: '下单量',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [],
            symbolSize: function (val) {
                return val[2];
            },
            label: {
                normal: {
                    formatter: '{b}',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#6495ED'
                }
            }
        },
        {
            name: 'Top5下单量',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [],
            symbolSize: function (val) {
                return val[2];
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            // hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#6495ED',
                    shadowBlur: 10,

                }
            },

        }
    ]
};


 export const mapdata = {
 	geomapoption: option,
 }
  //title动态设置，默认下单量
 mapoption.series[0].name = title;
 mapoption.series[1].name = 'Top5' + title;
  //赋值完成重置option
  

this.setState({

         mapoption: mapoption,
  })

[hustcc]

修改 demo 了，都是可以支持的，demo 地址还是刚才上面发的那个链接。

[zhongning7924]

谢谢了~我也试了下在提供的例子上是好使的，放到我本地配置的环境就会出问题，可能跟我react版本或者先关环境有关系吧（ "react": "^0.14.3"）

[zhongning7924]

echarts的版本问题
https://github.com/ecomfe/echarts/issues/4033