G2 - 中国地图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>中国地图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
$.getJSON('../../../static/data/china.json', function(mapData) {
  var features = mapData.features;

  var bgData = []; // 用于地图背景层的绘制
  for(var i=0; i<features.length; i++) {
    var name = features[i].properties.name;
    bgData.push({
      'name': name
    });
  }

  var userData = []; // 可视化数据
  for(var i=0; i<features.length; i++) {
    var name = features[i].properties.name;
    userData.push({
      "name": name,
      "value": Math.round(Math.random()*1000)
    });
  }


  var Stat = G2.Stat;
  var chart = new G2.Chart({
    id: 'c1',
    forceFit: true,
    height: 450,
    plotCfg: {
      margin: [50, 80]
    }
  });

  var bgView = chart.createView();
  bgView.source(bgData);
  bgView.tooltip(false);
  bgView.polygon().position(Stat.map.region('name', mapData)).color('#fff').style({
    stroke: '#333',
    lineWidth: 1
  });

  var userDataView = chart.createView();
  userDataView.source(userData);
  userDataView.polygon().position(Stat.map.region('name', mapData))
    .color('value', '#F4EC91-#AF303C')
    .label('name', {label: {fill: '#000', shadowBlur: 5, shadowColor: '#fff'}})
    .style({
      stroke: '#333',
      lineWidth: 1
    });
  chart.render();
});
</script>


      </body>
    </html>
          
        

中国地图

可视化的方法显示地理区域上的数据。使用地图作为背景，通过图形的位置来表现数据的地理位置，通常来展示数据在不同地理区域上的分布情况。了解更多

<!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>
 <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('../../../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>

</body>
    </html>