zoukankan      html  css  js  c++  java
  • Echarts 动态添加到map显示

    function loadMap(){
    var quota = $("#quota").val();
    var quotaName = $("#quotaName").val();
    var tradeName = $("#analysis_"+analysis_nav+"_"+tradeId).text();
    var year = $("#year").val();
    var type = 'map';
    GetData( type,quota,quotaName,tradeName,year);
    }

    $("#btnSearch").click(function(){
    loadMap();
    }).trigger("click");

    function TimeLineChange(time, myChart, type,quota,quotaName,tradeName,series) {
    var newstr = time.split("-");// 2015-07-07
    var year = newstr[0];

    $.ajax({url:"./EnterpriseAnalysisFetcher.do?action=trade-map",
    type:"POST",dataType:"JSON",async:true,
    data:{"tradeId":tradeId,"tradeName":tradeName, "quota":quota, "quotaName":quotaName, "year":year},
    success: function(json){
    var option = myChart.getOption();
    var datas = json.data;
    if(datas.length>0){
    option.series[0].data = datas;
    var ss = myChart.getSeries();
    ss[0].data = datas;
    ss[0].name = json.text;
    myChart.setSeries(ss,false);
    }
    }
    })

    }

    function GetData(type,quota,quotaName,tradeName,year) {
    $.ajax({url:"./EnterpriseAnalysisFetcher.do?action=trade-map",
    type:"POST",dataType:"JSON",async:true,
    data:{"tradeId":tradeId,"tradeName":tradeName, "quota":quota, "quotaName":quotaName, "year":year},

    success: function(data){
    require(['echarts','echarts/chart/map'], function(ec){
    var ecConfig = require('echarts/config');
    var s = {
    name : quotaName,
    type: 'map',
    mapType: 'china',
    roam: false,
    itemStyle:{
    normal:{label:{show:true}},
    emphasis:{label:{show:true}}
    },
    data:data.data
    };
    series.push(s);

    var myChart = ec.init(document.getElementById('chartWrapper'));

    var option = {
    timeline : {
    //时间轴时间列表
    data:[
    '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01' ,'2007-01-01',
    '2008-01-01','2009-01-01','2010-01-01','2011-01-01','2012-01-01'
    ],
    //自定义处理,只显示年份
    label:{ formatter : function(s) { return s.slice(0, 4); } },
    //时间轴的位置设定
    height:80,
    x:50,
    padding:[40,10,10,10],
    //时间轴播放控制
    autoPlay : true,
    playInterval : 2000
    },
    //时间点设置
    options : [
    {
    title : {text: tradeName, x:'center'},
    tooltip : {show : true, trigger : 'item'},//vertical
    legend : {orient: 'vertical', x:'left', data : [quotaName]},
    dataRange: {min: data.min, max: data.max, x: 'left', y: 'bottom',text:['高','低'],calculable : true},
    toolbox : {show : true, orient : 'vertical', x: 'right', y: 'center', feature : {saveAsImage : {show: true}}},
    roamController: { show: true,x: 'right',mapTypeControl: {'china': true } },
    series : series
    }
    ]
    }

    myChart.setOption(option);
    myChart.on(ecConfig.EVENT.TIMELINE_CHANGED, function (param) {

    TimeLineChange(param.data, myChart, type,quota,quotaName,tradeName,series);
    });
    });
    },
    error: function () {
    alert("加载出现错误");
    }
    });

    }

  • 相关阅读:
    基础语法
    Python简介
    Linux安装Python
    Git安装和使用
    vue 表单验证省市县三联动
    js 异步问题
    Json对象与Json字符串互转(4种转换方式)
    vue 常用的表单验证,包括手机号码,固定电话和身份证...
    webpack 基本功能和原理
    测试build出来的dist文件夹是否编译成功
  • 原文地址:https://www.cnblogs.com/xiaoxiao5ya/p/4764069.html
Copyright © 2011-2022 走看看