最近做从中国地图下钻的省市地图
首先引入
接着写js文件
有一个问题就是我想实现点击中国地图,下钻到省市地图,点击省市地图,对应的textbox中出现从后台调取数据,现在就是我点击中国地图左边也会出现数据不造怎么解决了。头疼。
var bar_data_ChinaMap; //第四个图表的数据源
$(function () {
getfirstchartdata();
document.getElementById("ChinaMap").style.height = window.screen.height / 10*5 - 20 + "px";//设置显示中国地图的图层高度和宽度
document.getElementById("ChinaMap").style.width = window.screen.width / 4 * 2 - 20 + "px";
require.config({
paths: {
echarts: '../Scripts/echarts/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
'echarts/chart/bar',
'echarts/chart/map'
], DrawCharts
);
function DrawCharts(ec) {
Drawbar_ChinaMapChart(ec);//中国地图
}
function Drawbar_ChinaMapChart(ec)//中国地图
{
var myChart = ec.init(document.getElementById('ChinaMap'));
optionMap = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: 'single',//multiple多选
mapLocation: {
x: 'left',
y: 'top',
width: '35%'
},
roam: false,
itemStyle: {
normal: {
label: { show: false },
areaStyle: { color: 'rgba(128, 128, 128, 0.01)' },//区块颜色
color: 'rgba(128, 128, 128, 0.01)',//颜色
borderColor: '#006699'//区块的边框颜色
},
emphasis: {
label: {
show: true
}, areaStyle: { color: '#FFA500' }
}
},
data: [
{ name: '北京', selected: false },
{ name: '天津', selected: false },
{ name: '上海', selected: false },
{ name: '重庆', selected: false },
{ name: '河北', selected: false },
{ name: '河南', selected: false },
{ name: '云南', selected: false },
{ name: '辽宁', selected: false },
{ name: '黑龙江', selected: false },
{ name: '湖南', selected: false },
{ name: '安徽', selected: false },
{ name: '山东', selected: false },
{ name: '新疆', selected: false },
{ name: '江苏', selected: false },
{ name: '浙江', selected: false },
{ name: '江西', selected: false },
{ name: '湖北', selected: false },
{ name: '广西', selected: false },
{ name: '甘肃', selected: false },
{ name: '山西', selected: false },
{ name: '内蒙古', selected: false },
{ name: '陕西', selected: false },
{ name: '吉林', selected: false },
{ name: '福建', selected: false },
{ name: '贵州', selected: false },
{ name: '广东', selected: false },
{ name: '青海', selected: false },
{ name: '西藏', selected: false },
{ name: '四川', selected: false },
{ name: '宁夏', selected: false },
{ name: '海南', selected: false },
{ name: '台湾', selected: false },
{ name: '香港', selected: false },
{ name: '澳门', selected: false }
]
}
],
animation: false
};
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = optionMap.series[0].data.length; i < l; i++) {
name = optionMap.series[0].data[i].name;
optionMap.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;
}
}
if (typeof selectedProvince == 'undefined') {
optionMap.series.splice(1);
optionMap.legend = null;
optionMap.dataRange = null;
myChart.setOption(optionMap, true);
return;
}
optionMap.series[1] = {
name: '随机数据',
type: 'map',
mapType: selectedProvince,
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
mapLocation: {
x: '35%',
width: '50%'
},
roam: false,
data: [
]
};
myChart.setOption(optionMap, true);
})
myChart.on(ecConfig.EVENT.CLICK, eConsole);//区块点击事件
function eConsole(param) {
//alert(param.name);
Drawbar_LocationChart(ec, param.name);
}
myChart.setOption(optionMap);
}
function Drawbar_LocationChart(ec, name)//现场信息
{
getLocationdata(name);
}
function getLocationdata(name)//获取现场数据
{
$.ajax({
async: false, //异步执行
type: "POST",
url: '../data_ashx/chartData.ashx',
data: { "action": "getLocationdata", "name": name },
// data: { "action": "getLocationdata"},
dataType: "json",
success: function (data) {
setLocationData(data.rows);
}
});
}
});