87,996
社区成员
发帖
与我相关
我的任务
分享Echarts 写json文件的格式，动态加载地图散点json文件的数据
我是js小白，学了一段时间的echarts，但对写json文件和动态加载地图散点json文件的数据搞不懂，请各位大神不吝赐教，感谢！！！
参考的Echarts实例：https://gallery.echartsjs.com/editor.html?c=xBJF7T_jWz
改写的代码：
请教问题：
1、geoCoordMap和BJData数据写到json文件的格式是什么样的？麻烦您写个json文件？我后续会用vb自动产生这个文件，主要是不知道这个json文件应该怎么写。。。
2、如何通过ajax的get方式读取到上面2个文件的数据？麻烦您在上面的代码中修改。
万分感谢！！！
参考的Echarts实例：https://gallery.echartsjs.com/editor.html?c=xBJF7T_jWz
改写的代码：
<div id="MidMap" style="width:48.5%;height:63.8%;top:5%;left:25.5%;position:absolute;border-color:#404a59;background-size:100% 100%!important;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var MidMapChart = echarts.init(document.getElementById('MidMap'));
// 指定图表的配置项和数据
var geoCoordMap = {
"辽宁省中心":[123.38,41.8],
"沈阳":[123.38,41.6],
"新民":[122.83,42],
"辽中":[122.7,41.52],
"海城":[122.75,40.85],
"锦州":[121.15,41.13],
"丹东":[124.37,40.13],
"岫岩":[123.25,40.3],
"大连":[121.62,38.92],
"长海":[122.58,39.28],
"营口":[122.18,40.65],
"朝阳":[120.42,41.58],
"铁岭":[123.88,42.3],
"昌图":[124.13,42.8],
"西丰":[124.7,42.77],
"抚顺":[123.97,41.97],
"本溪":[123.7,41.32],
"彰武":[122.52,42.48],
"葫芦岛":[120.6,40.9],
"建昌":[119.78,40.83],
"绥中":[120.32,40.35],
};
var BJData = [
[{
name: '沈阳',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '新民',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '辽中',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '海城',
value: 15
}, {
name: '辽宁省中心'
}],
[{
name: '锦州',
value: 0
}, {
name: '辽宁省中心'
}],
[{
name: '丹东',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '岫岩',
value: 0
}, {
name: '辽宁省中心'
}],
[{
name: '大连',
value: 30
}, {
name: '辽宁省中心'
}],
[{
name: '长海',
value: 0
}, {
name: '大连'
}],
[{
name: '营口台',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '朝阳',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '铁岭',
value: 15
}, {
name: '辽宁省中心'
}],
[{
name: '抚顺',
value: 0
}, {
name: '辽宁省中心'
}],
[{
name: '本溪',
value: 0
}, {
name: '辽宁省中心'
}],
[{
name: '昌图',
value: 0
}, {
name: '铁岭'
}],
[{
name: '西丰',
value: 0
}, {
name: '铁岭'
}],
[{
name: '葫芦岛',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '建昌',
value: 0
}, {
name: '葫芦岛'
}],
[{
name: '绥中',
value: 0
}, {
name: '葫芦岛'
}],
[{
name: '彰武',
value: 0
}, {
name: '辽宁省中心'
}]
];
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[
['辽宁省中心', BJData]
].forEach(function(item, i) {
series.push(
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 3, //箭头指向速度，值越小速度越快
trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 4, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 0.03, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 8 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [-25, -20], //偏移设置--台站
formatter: '{b}' //圆环显示文字
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 4 + val[2] / 1000; //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[0].name,
value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}),
},
//被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
//offset:[5, 0],
color: 'blue',//#00ffff
formatter: '{b}',
//offset:[0,-25],//文字的相对偏移（左、下）
textStyle: {
color: "#00ffff"
}
},
emphasis: {
show: true
}
},
symbol: 'pin',
symbolSize: 40, //标志点大小
itemStyle: {
normal: {
show: true,
color: 'blue'//#9966cc
}
},
data: [{
name: item[0],
value: geoCoordMap[item[0]].concat([100]),
}],
}
);
});
option4 = {
backgroundColor: '',
title: {
text: '布局与结果',
subtext: 'Data from abc',
left: 'center',
textStyle: {
color: '#fff',
//top:'0.05%',
fontSize: 18
},
// 分别设置四个方向的内边距
padding: [5, 10, 10, 10] //上、右、下、左
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(12, 204, 104, 0.92)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
return res;
}
},
visualMap: { //图例值控制
min: 0,
max: 30,
calculable: true,
splitNumber: 3,//共分5层
color: ['red','yellow','#00EE00'],//颜色从高到低依次渐变#76EE00
textStyle: {
color: '#fff'
}
},
geo: {
map: '辽宁',
label: {
emphasis: {
show: true //显示城市名
}
},
roam: true, //是否允许缩放
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: "105%",
itemStyle: {
normal: {
color: 'rgba(37, 43, 61, .5)', //地图背景色 rgba(90,108, 128, 1)
borderColor: 'white' //省市边界线'rgba(100,149,237,1)'
},
emphasis: {
color: 'rgba(90,108, 128, 1)' //悬浮背景rgba(37, 43, 61, .5)
}
}
},
series: series
};
var counts = option4.series[0].data.length; //获取所有闪动圆环数量
var dataIndex = 0;
//让圆环的提示框自动触发轮播显示
function autoHoverTip() {
for (var i = 0; i < counts; i++) {
(function(i) {
ts = setTimeout(function() {
MidMapChart.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: i
});
}, 5000 * i);
})(i);
}
}
setTimeout(function() {
autoHoverTip();
tv = setInterval(autoHoverTip, counts * 3000);
}, 500);
// 使用刚指定的配置项和数据显示图表。
MidMapChart.setOption(option4);
myEcharts.push(MidMapChart);
</script>
请教问题：
1、geoCoordMap和BJData数据写到json文件的格式是什么样的？麻烦您写个json文件？我后续会用vb自动产生这个文件，主要是不知道这个json文件应该怎么写。。。
2、如何通过ajax的get方式读取到上面2个文件的数据？麻烦您在上面的代码中修改。
万分感谢！！！
...全文
请发表友善的回复…
发表回复
ajunajun 2019-03-20
- 打赏
- 举报
非常感谢！还有个问题，我想气泡提示的时候不显示value值，显示状态字符串，在js文件中改成了这个样子：
var BJData = [
[{
name: '沈阳',
value: 1,
statusnow: '正常'
}, {
name: '辽宁省中心'
}],
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(12, 204, 104, 0.92)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback,zt) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var statusnow = params.statusnow;
var value = params.value[params.seriesIndex + 1];
res = "<span style='color:#fff;'>" + name + "</span><br/>运行状态：" + statusnow;
return res;
}
},
囧 2019-03-20
- 打赏
- 举报
不用生成json，直接生成js文件，再用<script>引入就行
<script src=".....数据文件.js"></script> 放到上面，内容如下：
var geoCoordMap = {
"辽宁省中心":[123.38,41.8],
"沈阳":[123.38,41.6],
"新民":[122.83,42],
"辽中":[122.7,41.52],
"海城":[122.75,40.85],
"锦州":[121.15,41.13],
"丹东":[124.37,40.13],
"岫岩":[123.25,40.3],
"大连":[121.62,38.92],
"长海":[122.58,39.28],
"营口":[122.18,40.65],
"朝阳":[120.42,41.58],
"铁岭":[123.88,42.3],
"昌图":[124.13,42.8],
"西丰":[124.7,42.77],
"抚顺":[123.97,41.97],
"本溪":[123.7,41.32],
"彰武":[122.52,42.48],
"葫芦岛":[120.6,40.9],
"建昌":[119.78,40.83],
"绥中":[120.32,40.35],
};
var BJData = [
[{
name: '沈阳',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '新民',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '辽中',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '海城',
value: 15
}, {
name: '辽宁省中心'
}],
[{
name: '锦州',
value: 0
}, {
name: '辽宁省中心'
}],
[{
name: '丹东',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '岫岩',
value: 0
}, {
name: '辽宁省中心'
}],
[{
name: '大连',
value: 30
}, {
name: '辽宁省中心'
}],
[{
name: '长海',
value: 0
}, {
name: '大连'
}],
[{
name: '营口台',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '朝阳',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '铁岭',
value: 15
}, {
name: '辽宁省中心'
}],
[{
name: '抚顺',
value: 0
}, {
name: '辽宁省中心'
}],
[{
name: '本溪',
value: 0
}, {
name: '辽宁省中心'
}],
[{
name: '昌图',
value: 0
}, {
name: '铁岭'
}],
[{
name: '西丰',
value: 0
}, {
name: '铁岭'
}],
[{
name: '葫芦岛',
value: 1
}, {
name: '辽宁省中心'
}],
[{
name: '建昌',
value: 0
}, {
name: '葫芦岛'
}],
[{
name: '绥中',
value: 0
}, {
name: '葫芦岛'
}],
[{
name: '彰武',
value: 0
}, {
name: '辽宁省中心'
}]
];
囧 2019-03-20
- 打赏
- 举报
var statusnow = BJData[params.dataIndex][0].statusnow;
ajunajun 2019-03-19
- 打赏
- 举报
什么方式获取后台数据都行，我只知道ajax的get方式
