react集成echart

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