前端echart里面几个常见问题
1.后端有数据过来,ip转成地理位置,可是传过来的地理位置在echarts地图中的地理位置不存在,怎么办?(比如地图中设定的是刚果共和国,但是传过来的是刚果布,此刻,echarts的世界地图出不来了!)
解决方案:将地图中没有设定的全部都设为“未知”。
修改1:
`var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
if(geoCoordMap.hasOwnProperty(dataItem[0].name)){
var fromCoord = geoCoordMap[dataItem[0].name];
}else{
var fromCoord = [124.8925, 30.4486];
}
if(geoCoordMap.hasOwnProperty(dataItem[1].name)){
var toCoord = geoCoordMap[dataItem[1].name];
}else{
var toCoord = [124.8925, 30.4486];
}
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};`var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
if(geoCoordMap.hasOwnProperty(dataItem[0].name)){
var fromCoord = geoCoordMap[dataItem[0].name];
}else{
var fromCoord = [124.8925, 30.4486];
}
if(geoCoordMap.hasOwnProperty(dataItem[1].name)){
var toCoord = geoCoordMap[dataItem[1].name];
}else{
var toCoord = [124.8925, 30.4486];
}
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
修改2:
symbol: 'circle',
symbolSize: function (val) {
var l=0;
while(val[2] >= 1){
val[2]=val[2]/10;
l++;
}
return val[2] / Math.pow(10,l-3)+7;
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map(function (dataItem) {
var fromCoord;
var nameValue;
if(geoCoordMap.hasOwnProperty(dataItem[0].name)){
fromCoord = geoCoordMap[dataItem[0].name];
nameValue = dataItem[0].name;
}else{
fromCoord = geoCoordMap['未知'];
nameValue = '未知';
}
return {
name: nameValue,
value: fromCoord.concat([dataItem[0].value])
};
}),
},
两处都要进行判读修改,不然图像出不来。
2.在top10,top5排序中,后端已经降序传过来数据,结果echarts图像好像是反着来的,查了好久
解决方法:yAxis加一项配置inverse: true反序排列就行了,晕!
3.时间戳转时间时,后端过来的是字符串!是转不了时间的!
解决方法:先将传过来的字符串数组转化为数组值。在转时间
for(let i=0;i<xData.length;i++){
xData[i] = parseInt(xData[i])
}
console.log(xData);
for (var j = 0; j < xData.length; j++) {
xData[j]= new Date(xData[j]);
}
4.在<p></p>插入后端的东西
<p id="ysy" style="color: #d0e9c6;font-weight:bold;font-size:32px;" ></p>
<script type="text/javascript">
change();
function change() {
<p id="ysy" style="color: #d0e9c6;font-weight:bold;font-size:32px;" ></p>
<script type="text/javascript">
change();
function change() {
var xdata =[];
(function () {//<![CDATA[
$.ajax({
//请求方式
type: "POST",
//文件位置
url: "链接",
//返回数据格式为json,也可以是其他格式如
dataType: "json",
contentType: 'application/json',
//请求成功后要执行的函数,拼接html
success: function (result) {
xdata.push(result.data);
for(let i=0;i<xdata.length;i++){
xdata[i] = parseInt(xdata[i])
}
console.log(xdata);
document.getElementById("ysy").innerHTML = "xxx:" + xdata;
}
});
})();
};
document.getElementById("ysy").innerHTML = "系统综合评分:" + xdata;
}
});
})();
};