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