react集成echart map的demo
代码如下
/**
* Created by jack on 2017/5/24.
*/
import React, { Component, PropTypes } from 'react';
import echarts from 'echarts';
import BaseComponent from './BaseComponent';
export default class MapDemo extends BaseComponent{
constructor(props) {
super(props);
this.state={name:''}
this.initMap=this.initMap.bind(this)
}
componentDidMount() {
let url = "js/shanxitest.json";
let p = {
};
let f = function (result) {
if (result) {
this.initMap('shanxi',result)
}
}.bind(this)
$.get(url, p, f)
}
initMap(name,geoJson){
let bash=this;
const myChart = echarts.init(document.getElementById('map'));
echarts.registerMap(name, geoJson);
myChart.setOption({
backgroundColor: '#404a59',
title: {
text: "shanxi",
left: 'center',
textStyle: {
color: '#fff'
}
},
series: [
{
type: 'map',
mapType: name,
label: {
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#389BB7',
areaColor: '#fff',
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data:[{
// 数据项的名称
name: '晋中市',
// 数据项值8
value: 10
}, {
name: '忻州市',
value: 20
},
{
name: '阳泉市',
value: 30
},
{
name: '长治市',
value: 40
}]
// animationDurationUpdate: 1000,
// animationEasingUpdate: 'quinticInOut'
}
]
}
);
myChart.on('click', function (params) {
debugger
bash.setState({name:params.value})
});
}
render() {
let a=this.state.name;
return (
<div className="main-content">
<div>{a}</div>
<div id="map" className="baidumap"></div>
</div>
);
}
}
新加了点击的事件这样可以获取到点击某个市之后的id