Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>中国地图</title>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
    <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="c1"></div>
  </body>
  <script type="text/babel">
      let chinaGeoJSON;
      const Chart = createG2(chart => {
        const Stat = G2.Stat;
        chart.axis(false);
        chart.polygon().position(Stat.map.region('name', chinaGeoJSON))
          .color('value', '#F4EC91-#AF303C')
          .label('name', {label: {fill: '#000', shadowBlur: 5, shadowColor: '#fff'}})
          .style({
            stroke: '#333',
            lineWidth: 1
          });
        chart.render();
      });
​
      const MyComponent = React.createClass({
        getInitialState() {
          return {
            data: [],
            forceFit: true,
            width: 500,
            height: 450,
            plotCfg: {
              margin: [50, 80]
            }
          };
        },
        componentDidMount: function() {
          const self = this;
          axios.get('http://antvis.github.io/static/data/china.json').then(function (response) {
            chinaGeoJSON = response.data;
            const userData = [];
            const features = chinaGeoJSON.features;
            for(let i=0; i<features.length; i++) {
              const name = features[i].properties.name;
              userData.push({
                "name": name,
                "value": Math.round(Math.random()*1000)
              });
            }
​
            self.setState({
              data: userData
            });
          }).catch(function (error) {
            console.log(error);
          });
        },
        render() {
          if (this.state.data.length === 0) {
            return (<div></div>);
          } else {
            return (
              <div>
                <Chart
                  data={this.state.data}
                  width={this.state.width}
                  height={this.state.height}
                  plotCfg={this.state.plotCfg}
                  forceFit={this.state.forceFit} />
              </div>
            );
          }
        },
      });
      ReactDOM.render(<MyComponent />, document.getElementById('c1'));
  </script>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers