在react中使用echarts制作地图

喜欢ヅ旅行 2021-07-25 11:34 638阅读 0赞

1.下载echarts

npm install echarts

2.app.js代码如下

import React, {  Component } from 'react';
    import './index.css';
    import echarts from 'echarts';
    import 'echarts/map/js/china';
    // import geoJson from 'echarts/map/json/china.json';
    
    
    export default class App extends Component{ 
      render(){ 
        return(
          <div>
            <h1>China map</h1>
            <div id='main'></div>
          </div>
        )
      }
      componentDidMount(){ 
        this.initalECharts();
      }
      initalECharts=()=>{ 
        var data= [
          { name:"南海诸岛",value:0},
          { name: '北京', value: randomValue()},
          { name: '天津', value: randomValue()},
          { name: '上海', value: randomValue()},
          { name: '重庆', value: randomValue()},
          { name: '河北', value: randomValue()},
          { name: '河南', value: randomValue()},
          { name: '云南', value: randomValue()},
          { name: '辽宁', value: randomValue()},
          { name: '黑龙江', value: randomValue()},
          { name: '湖南', value: randomValue()},
          { name: '安徽', value: randomValue()},
          { name: '山东', value: randomValue()},
          { name: '新疆', value: randomValue()},
          { name: '江苏', value: randomValue()},
          { name: '浙江', value: randomValue()},
          { name: '江西', value: randomValue()},
          { name: '湖北', value: randomValue()},
          { name: '广西', value: randomValue()},
          { name: '甘肃', value: randomValue()},
          { name: '山西', value: randomValue()},
          { name: '内蒙古', value: randomValue()},
          { name: '陕西', value: randomValue()},
          { name: '吉林', value: randomValue()},
          { name: '福建', value: randomValue()},
          { name: '贵州', value: randomValue()},
          { name: '广东', value: randomValue()},
          { name: '青海', value: randomValue()},
          { name: '西藏', value: randomValue()},
          { name: '四川', value: randomValue()},
          { name: '宁夏', value: randomValue()},
          { name: '海南', value: randomValue()},
          { name: '台湾', value: randomValue()},
          { name: '香港', value: randomValue()},
          { name: '澳门', value: randomValue()}
        ]
        var myChart = echarts.init(document.getElementById('main'));
        function randomValue() { 
          return Math.round(Math.random()*1000);
        }
        let option = { 
          tooltip: { 
            formatter:function(params,ticket, callback){ 
              return params.seriesName+'<br />'+params.name+'：'+params.value
            }//数据格式化
          },
          visualMap: { 
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],//取值范围的文字
            inRange: { 
              color: ['#fbf8f3', '#94d2a5']//取值范围的颜色
            },
            show:true//图注
          },
          geo: { 
            map: 'china',
            roam: false,//不开启缩放和平移
            zoom: 1.23,//视角缩放比例
            label: { 
              normal: { 
                show: true,
                fontSize:'10',
                color: 'rgba(0,0,0,0.7)'
              }
            },
            itemStyle: { 
              normal:{ 
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis:{ 
                  areaColor: 'tomato',//鼠标选择区域颜色
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series : [
            { 
              name: '自定义名称',
              type: 'map',
              geoIndex: 0,
              data:data
            }
          ]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) { 
          alert(params.name);
        });
        
      }
    }

3.index.css代码

#main{ 
      width:600px;
      height:450px;
      margin: 150px auto;
      border:1px solid #ddd;
    }
    /*默认长宽比0.75*/