echarts.registermap（echartsregisterMap用法）

本篇文章给大家谈谈echarts.registermap，以及echartsregisterMap用法对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、2021-06-06在vue中使用 echarts3d地图
• 2、echarts如何实现点击地图某个区域，某个区域放大，望贴出代码。
• 3、【echarts】的json地图如何自定义各省份颜色

2021-06-06在vue中使用 echarts3d地图

vue中使颂档敬用 echarts地图

main.js中

package.json 使用版本

在vue文件中使用

3d地图示例

中国地图json数蠢掘据

import '@/components/china'

var myChart = this. echarts.registerMap("china", china);//china为上野慎图中的json数据

const myChart = this.$echarts.init(document.getElementById('main'));

option={

//此处配置可参考官网例子即可

}；

myChart.setOption(option);

此处说明如何出现geo3d（立体地图）

数据来源

;lat=30.332329214580188lng=106.72278672066881zoom=3.5

按照需求，选择对应的数据，保存为json文件引入项目中即可

echarts如何实现点击地图某个区域，某个区域放大，望贴出代码。

网页链接这个上面写的   不知是不是你要的效果。供参考

import echarts from 'echarts/lib/echarts';

import 'echarts/lib/chart/map';

/*geojson文件很大，生产环境中，应该放在public文件夹中，并异步加载*/

import { geoJson } from './regionJsonXc';

import { sqJson } from './regionJsonXc';

let defaultBlue = '#25ade6';

let darkBlue = '#186396'; //详细地图，线条颜色暗一些

// 配置option，一定要查看echarts官方配置文档

let option = {

  // 地图配置

  geo: {

      show: true,

      map: 'XC',

      label: {

          normal: {

              show: true,

              color: '#ccc',

              fontSize: 14,

          },

         含指 emphasis: {

              show: true,

              color: '#fff'

          }

      },

      roam: true, // 滚轮滚动--放大或缩小

      itemStyle: {

          normal: {

              label: {

                  show: true,

                  color: '#fff',

                  fontSize: 14,

              },

              areaColor: 'rgba(24,99,150,0.05)',

              borderColor: #186396,

              shadowColor: #186396,

              shadowBlur: 10,

          },

          emphasis: {

              label: {

                  show: false,

                  color: '#fff',

                  shadowColor: '#25ade6',

       塌颤           shadowBlur: 10,

              },

              areaColor: 'rgba(24,99,150,0.5)',

       团老败   },

      },

      zoom: 1

  },

  series: []

};

let myChart = null;

class XcMap extends Component {

  state = {

      option: option,

      detail: false, // 是否使用详细地图

      curMap:geoJson,

  }

  componentDidMount() {

      this.draw(geoJson);

  }

  drawMap = (json) = {

      const { option } = this.state;

      let echartElement = document.getElementById('xc-map');

      myChart = echarts.init(echartElement);

      echarts.registerMap('XC', json);

      myChart.setOption(option, true);

      myChart.on('georoam', this.onDatazoom); // 缩放监听事件

  }

  /*

      获取zoom和center

      zoom:地图缩放值，

      center:中心位置，地图拖动之后会改变

  */

  getZoom = () = {

      if(myChart){

          let { zoom, center } = myChart.getOption().geo[0];

          return { zoom, center }

      }

      return;

  }

  /*

      保存缩放值和中心位置，

  */

  saveZoom = () = {

      let { zoom, center } = this.getZoom();

      const { option } = this.state;

      option.geo.zoom = zoom;

      option.geo.center = center;

     this.setState({option});

  }

  /**

   * 地图缩小/放大

   */

  onDatazoom = () = {

      const { detail, option } = this.state;

      const { zoom } = this.getZoom();

      const threshold = 1.7;

   

      this.saveZoom(); // 地图缩放后，将缩放值和center保存在状态中

      if (zoom = threshold !detail) {

          // 切换详细地图

          option.geo.itemStyle.normal.borderColor = darkBlue;

          option.geo.itemStyle.normal.shadowColor = darkBlue;

          this.setState({

              detail:true,

              option,

              curMap:sqJson

          });

          this.drawMap(sqJson);

      } else if (detail zoom threshold) {

          // 切换默认地图

          option.geo.itemStyle.normal.borderColor = defaultBlue;

          option.geo.itemStyle.normal.shadowColor = defaultBlue;

          this.setState({

              detail:false,

              option,

              curMap:geoJson

          });

          this.drawMap(geoJson);

      }

  }

  render() {

      const {  position } = this.state;

      return (div

          div id="xc-map" className={styles.map}/div

      /div);

  }

}

export default XcMap;

【echarts】的json地图如何自定义各省份颜色

根据选择的地区去加载地图数据然后给chart.setOption(); 改变红色历迅字体的值就可以，红色字体是省的拼音具体查看echarts/map文件夹内文件，有js加载方式和肢竖此json加载方式

$.get('map/json/纤滚china.json', function (chinaJson) {

echarts.registerMap('china', chinaJson);

var chart = echarts.init(document.getElementById('main'));

chart.setOption({

series: [{

type: 'map',

map: 'china'

}]

});

});

[img]

关于echarts.registermap和echartsregisterMap用法的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。