Echarts实现成都市地图下钻

邝邝邝邝丹

已于 2022-03-22 18:37:42 修改

阅读量3.3k

点赞数 3

文章标签： vue json js

于 2020-06-28 14:54:55 首次发布

本文链接：https://blog.csdn.net/qq_42568116/article/details/106998774

版权

1.首先获取成都市的json文件，以及成都市各个位置的json文件
在mounted触发
注意：vue-cli4获取json文件数据，使用相对位置获取

mounted(){
	this.chengdu = "http://192.168.1.79:8082/static/chengdu.json";
    this.chenghuaqu = " http://192.168.1.79:8082/static/chenghuaqu.json";
    this.chongzhoushi = " http://192.168.1.79:8082/static/chongzhoushi.json";
    this.dayixian = " http://192.168.1.79:8082/static/dayixian.json";
    this.dujiangyanshi = " http://192.168.1.79:8082/static/dujiangyanshi.json";
    this.jianyangshi = " http://192.168.1.79:8082/static/jianyangshi.json";
    this.jinjiangqu = " http://192.168.1.79:8082/static/jinjiangqu.json";
    this.jinniuqu = " http://192.168.1.79:8082/static/jinniuqu.json";
    this.jintangxian = " http://192.168.1.79:8082/static/jintangxian.json";
    this.pengzhoushi = " http://192.168.1.79:8082/static/pengzhoushi.json";
    this.piduqu = " http://192.168.1.79:8082/static/piduqu.json";
    this.pujiangxian = " http://192.168.1.79:8082/static/pujiangxian.json";
    this.qingbaijiangqu =
      " http://192.168.1.79:8082/static/qingbaijiangqu.json";
    this.qingyangqu = " http://192.168.1.79:8082/static/qingyangqu.json";
    this.qionglaishi = " http://192.168.1.79:8082/static/qionglaishi.json";
    this.wuhouqu = " http://192.168.1.79:8082/static/wuhouqu.json";
    this.piduqu = " http://192.168.1.79:8082/static/piduqu.json";
    this.xinjinxian = " http://192.168.1.79:8082/static/xinjinxian.json";
    this.longquanqi = " http://192.168.1.79:8082/static/longquanyiqu.json";
    this.xinduqu = " http://192.168.1.79:8082/static/xinduqu.json";
    this.shaungliuxian = " http://192.168.1.79:8082/static/shuangliuqu.json";
    this.wenjiangqu = " http://192.168.1.79:8082/static/wenjiangqu.json";


    this.extendsMap();
}

methods:{
	extendsMap(){
      let that = this;
      that.$echarts.extendsMap = function(id, opt) {
        that.initData(opt);
        that.mapChart.setOption(that.option);
        // 添加事件
        that.mapChart.on("click", function(params) {
          var _this = this;
          that.handleEcharts(that, params, _this);
        });
      };
      // 页面初次加载
      that.initMap();
},
}

 initData(opt) {
      this.mapChart = this.$echarts.init(document.getElementById("chartMap"));
      this.cityMap = {
        成华区: this.chenghuaqu,
        崇州市: this.chongzhoushi,
        大邑县: this.dayixian,
        都江堰市: this.dujiangyanshi,
        金牛区: this.jinniuqu,
        金堂县: this.jintangxian,
        锦江区: this.jinjiangqu,
        龙泉驿区: this.longquanqi,
        彭州市: this.pengzhoushi,
        蒲江县: this.pujiangxian,
        青白江区: this.qingbaijiangqu,
        青羊区: this.qingyangqu,
        双流区: this.shaungliuxian,
        温江区: this.wenjiangqu,
        武侯区: this.wuhouqu,
        新都区: this.xinduqu,
        新津县: this.xinjinxian,
        邛崃市: this.qionglaishi,
        郫都区: this.piduqu
      };
      this.curGeoJson = {};
      this.geoCoordMap = {
        成华区: [104.103077, 30.660275],
        崇州市: [103.671049, 30.631478],
        大邑县: [103.522397, 30.586602],
        都江堰市: [

最低0.47元/天解锁文章