You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/06/19 07:04:48 UTC
[GitHub] [incubator-echarts] xxxs opened a new issue #12829: Echarts cannot be rendered . Error: xAxis "0" not found
xxxs opened a new issue #12829:
URL: https://github.com/apache/incubator-echarts/issues/12829
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
<style>
.ebox {
width: 1000px;
height: 800px;
}
</style>
</head>
<body>
<div id="ebox" class="ebox"></div>
<script>
function getColor(type, typeType) {
var color;
if (isNaN(type)) {
switch (type) {
case '暂无数据':
color = 'gray';
break;
case '优':
color = '#43ce17';
break;
case '良':
color = '#efdc31';
break;
case '轻度污染':
color = '#fa0';
break;
case '中度污染':
color = '#ff401a';
break;
case '重度污染':
color = '#d20040';
break;
case '严重污染':
color = '#9c0a4e';
break;
case 'AQI':
color = 'hsl(40,100%,50%)';
break;
case '臭氧':
color = 'hsl(80,100%,50%)';
break;
case '二氧化硫':
color = 'hsl(120,100%,50%)';
break;
case 'NO2':
color = 'hsl(160,100%,50%)';
break;
case '一氧化碳':
color = 'hsl(200,100%,50%)';
break;
case '细颗粒物':
color = 'hsl(240,100%,50%)';
break;
case '可吸入颗粒物':
color = 'hsl(280,100%,50%)';
break;
default:
break;
}
} else {
function getAQITYPE(aqi) {
if (aqi <= 50) {
return '优';
} else if (aqi <= 100) {
return '良';
} else if (aqi <= 150) {
return '轻度污染';
} else if (aqi <= 200) {
return '中度污染';
} else if (aqi <= 300) {
return '重度污染';
} else {
return '严重污染';
}
}
color = getColor(getAQITYPE(type));
}
return color;
}
let myChart = echarts.init(document.getElementById("ebox"));
let backgroundColor = 'rgba(255,255,255,.88)', //'#1f1a1a',
textColor = 'gray',
fontFamily = '仿宋',
$body = $(myChart.getDom());
$body.css({
'font-family': fontFamily
})
let option = {
title: {
// text: data.name, /* update */
text: "",
subtext: '数据来源：中国环境监测总站',
sublink: 'http://123.127.175.45:8082/',
left: 10,
bottom: '400',
textStyle: {
color: textColor,
}
},
grid: {
backgroundColor: backgroundColor,
show: false,
containLabel: true,
zlevel: '2',
left: '10',
bottom: '180',
width: '30%',
height: '30%',
borderWidth: 0
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false,
},
bmap: {
roam: true,
center: [116.39825, 40.045975]
},
visualMap: [{
seriesIndex: 0,
backgroundColor: 'whitesmoke',
bottom: 2,
left: 2,
borderRadius: 0,
itemWidth: 38,
itemGap: 4,
padding: 5,
inverse: true,
pieces: [{
value: 'NaN',
label: '暂无',
color: getColor('暂无'),
}, {
min: 0,
max: 50,
label: '优',
color: getColor('优')
},
{
min: 51,
max: 100,
label: '良',
color: getColor('良')
}, {
min: 101,
max: 150,
label: '轻度',
color: getColor('轻度污染')
}, {
min: 151,
max: 200,
label: '中度',
color: getColor('中度污染')
}, {
min: 201,
max: 300,
label: '重度',
color: getColor('重度污染')
}, {
min: 301,
label: '严重',
color: getColor('严重污染')
},
],
textStyle: {
color: 'black'
}
}],
tooltip: {
trigger: 'item',
confine: true,
enterable: true,
textStyle: {
fontFamily: fontFamily
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'bmap',
symbol: 'rect',
symbolSize: function (a, p) {
var size = [12 * (p.name.length), 25];
return size;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
tooltip: {
formatter: function (params) {
const data = params.data.data;
var $ul = $('<ul><li><b>' + params.name + '</b></li></ul>');
$ul.css({
'font-size': 'small',
'border-radius': '5px',
'list-style': 'none',
padding: '10px',
'box-shadow': '0 1px 4px #ddd',
//'background-color': 'rgba(0,0,0,.21)',
color: params.color
});
$ul.children().first().css({
'font-size': 'large',
'border-bottom': '1px double',
});
if (data.city_code) {
$ul.data('code', data.city_code)
}
let option = {
title: {
text: data.name
},
grid: {
show: true
},
yAxis: {
type: 'category',
axisLabel: {
rotate: -45,
textStyle: {
color: 'white'
},
show: false,
},
data: [],
show: false,
name: data.name,
nameLocation: 'end',
nameTextStyle: {
color: 'white'
},
},
series: [{}, {
zlevel: '2',
type: 'bar',
gridIndex: 0,
label: {
normal: {
show: true,
position: 'insideLeft',
formatter: '{b}:{c}',
fontFamily: fontFamily,
fontWeight: 'bold'
}
},
data: []
}]
};
$ul.children().first().find('b').css({
'color': 'whitesmoke',
'text-shadow': '0 1px 2px black'
})
if (data.aqi) {
$ul.children().first().append('<b style="font-size: xx-large;float: right;">' + data.aqi + '</b>');
option.yAxis.data.push('AQI');
option.series[1].data.push({
value: data.aqi,
itemStyle: {
color: getColor(data.aqi)
}
});
}
if (data.pm2_5) {
$('<li><b>细颗粒物：</b>' + data.pm2_5 + '<span>μg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('细颗粒物');
option.series[1].data.push({
value: data.pm2_5,
itemStyle: {
color: getColor('细颗粒物')
}
});
}
if (data.pm10) {
$('<li><b>可吸入颗粒物：</b>' + data.pm10 + '<span>μg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('可吸入颗粒物');
option.series[1].data.push({
value: data.pm10,
itemStyle: {
color: getColor('可吸入颗粒物')
}
});
}
if (data.o3) {
$('<li><b>臭氧：</b>' + data.o3 + '<span>μg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('臭氧');
option.series[1].data.push({
value: data.o3,
itemStyle: {
color: getColor('臭氧')
}
});
}
if (data.co) {
$('<li><b>一氧化碳：</b>' + data.co + '<span>mg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('一氧化碳');
option.series[1].data.push({
value: data.co,
itemStyle: {
color: getColor('一氧化碳')
}
});
}
if (data.so2) {
$('<li><b>二氧化硫：</b>' + data.so2 + '<span>μg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('二氧化硫');
option.series[1].data.push({
value: data.so2,
itemStyle: {
color: getColor('二氧化硫')
}
});
}
$ul.children('li').find('span').css('font-size', 'xx-small');
myChart.setOption(option);
return $ul.prop('outerHTML');
}
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
//position: 'right',
show: true,
backgroundColor: backgroundColor,
borderColor: '#ddd',
borderWidth: 1,
fontFamily: fontFamily,
fontWeight: 'bold',
fontSize: 13,
color: 'whitesmoke',
padding: 4
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: '#333'
}
}
}]
}
setTimeout(function () {
const data = [{
"name": "张家口市",
"o3": 61,
"pubtime": "2018-12-28 14:00:00",
"latitude": "40.812435",
"pm2_5": 10,
"so2": 6,
"aqi": 23,
"pm10": 23,
"city_code": "131200",
"co": 0.2,
"longitude": "114.89305"
}, {
"name": "秦皇岛市",
"o3": 55,
"pubtime": "2018-12-28 14:00:00",
"latitude": "39.9366",
"pm2_5": 15,
"so2": 10,
"aqi": 28,
"pm10": 28,
"city_code": "130300",
"co": 0.8,
"longitude": "119.60482"
}, {
"name": "承德市",
"o3": 58,
"pubtime": "2018-12-28 14:00:00",
"latitude": "40.96416",
"pm2_5": 7,
"so2": 6,
"aqi": 31,
"pm10": 31,
"city_code": "130800",
"co": 0.3,
"longitude": "117.92774"
}, {
"name": "北京市",
"o3": 53,
"pubtime": "2018-12-28 14:00:00",
"latitude": "40.045975",
"pm2_5": 9,
"so2": 3,
"aqi": 32,
"pm10": 32,
"city_code": "110000",
"co": 0.3,
"longitude": "116.39825"
}, {
"name": "石家庄市",
"o3": 57,
"pubtime": "2018-12-28 14:00:00",
"latitude": "38.03179861125",
"pm2_5": 15,
"so2": 12,
"aqi": 34,
"pm10": 34,
"city_code": "130100",
"co": 0.7,
"longitude": "114.4970652875"
}, {
"name": "唐山市",
"o3": 55,
"pubtime": "2018-12-28 14:00:00",
"latitude": "39.6449533333333",
"pm2_5": 19,
"so2": 8,
"aqi": 36,
"pm10": 36,
"city_code": "130200",
"co": 0.6,
"longitude": "118.182916666667"
}, {
"name": "廊坊市",
"o3": 58,
"pubtime": "2018-12-28 14:00:00",
"latitude": "39.54584",
"pm2_5": 12,
"so2": 4,
"aqi": 40,
"pm10": 40,
"city_code": "131000",
"co": 0.5,
"longitude": "116.72406"
}, {
"name": "沧州市",
"o3": 65,
"pubtime": "2018-12-28 14:00:00",
"latitude": "38.3157666666667",
"pm2_5": 16,
"so2": 12,
"aqi": 45,
"pm10": 45,
"city_code": "130900",
"co": 0.5,
"longitude": "116.871566666667"
}, {
"name": "天津市",
"o3": 51,
"pubtime": "2018-12-28 14:00:00",
"latitude": "39.0985566666667",
"pm2_5": 8,
"so2": 6,
"aqi": 51,
"pm10": 52,
"city_code": "120000",
"co": 0.4,
"longitude": "117.319033333333"
}, {
"name": "保定市",
"o3": 54,
"pubtime": "2018-12-28 14:00:00",
"latitude": "38.8762666666667",
"pm2_5": 24,
"so2": 18,
"aqi": 52,
"pm10": 53,
"city_code": "130600",
"co": 0.6,
"longitude": "115.4852"
}, {
"name": "衡水市",
"o3": 55,
"pubtime": "2018-12-28 14:00:00",
"latitude": "37.74335",
"pm2_5": 28,
"so2": 12,
"aqi": 54,
"pm10": 57,
"city_code": "131100",
"co": 0.6,
"longitude": "115.6743"
}, {
"name": "邢台市",
"o3": 52,
"pubtime": "2018-12-28 14:00:00",
"latitude": "37.0771",
"pm2_5": 31,
"so2": 14,
"aqi": 54,
"pm10": 58,
"city_code": "130500",
"co": 0.5,
"longitude": "114.506675"
}, {
"name": "邯郸市",
"o3": 49,
"pubtime": "2018-12-28 14:00:00",
"latitude": "36.60786",
"pm2_5": 32,
"so2": 18,
"aqi": 64,
"pm10": 77,
"city_code": "130400",
"co": 0.8,
"longitude": "114.513875"
}];
const $tbody = $('<table></table>');
$tbody.css({
position: 'fixed',
right: '12px',
bottom: '21px',
'z-index': 9,
'box-shadow': '0 1px 4px #ddd',
'background-color': backgroundColor
});
$tbody.appendTo($body);
myChart.setOption({
series: [{
type: 'effectScatter', /* update */
data: data.filter(function (item) {
return item.latitude && item.longitude;
}).map(function (item, index) {
item.value = [item.longitude, item.latitude].concat(item.aqi);
var $tr = $('<tr><td>' + (index + 1) + '</td><td>' + item.name + '</td><td>' + (item.aqi ? item.aqi : '--') + '</td></tr>');
$tr.appendTo($tbody);
$tr.children().not(':eq(1)').css({
'text-align': 'center'
});
$tr.children().css({
'border-bottom': '1px dotted'
});
$tr.children().last().css('background-color', getColor(item.aqi));
return {
name: item.name,
value: item.value,
data: item
};
})
}]
})
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.setMinZoom(7);
bmap.setMaxZoom(10);
bmap.addControl(new BMap.NavigationControl());
const $mapStyle = $('<select></select');
$mapStyle.css({
position: 'fixed',
right: '.521%',
top: '.521%'
});
$mapStyle.appendTo($body);
$mapStyle.append('<option value="normal"></option>');
$mapStyle.append('<option value="dark">极夜黑</option>');
// $mapStyle.append('<option value="light">明亮</option>');
$mapStyle.change(function () {
let style = $(this).val();
console.log(style)
switch (style) {
case 'normal':
case 'dark':
case 'light':
bmap.setMapStyle({
style: style
});
break;
default:
json = $(this).find('option:selected').data('json');
json.push({
"featureType": "road",
"elementType": "all",
"stylers": {
"visibility": "off"
}
});
bmap.setMapStyle({
styleJson: json
});
}
function resetColor(backgroundColor, textColor) {
myChart.setOption({
title: {
textStyle: {
color: textColor,
}
},
grid: {
backgroundColor: backgroundColor
},
tooltip: {
backgroundColor: backgroundColor
},
series: [{
label: {
backgroundColor: backgroundColor,
color: textColor
}
}]
});
$body.css({
'background-color': backgroundColor,
'color': textColor
});
$tbody.css({
'background-color': backgroundColor
})
}
switch (style) {
case '一蓑烟雨':
resetColor('rgba(237, 243, 243,.88)', 'gray');
break;
case 'dark':
resetColor('rgba(33, 33, 33,.88)', 'white');
break;
case '绿野仙踪':
resetColor('rgba(31, 60, 69,.88)', 'whitesmoke');
break;
case '青花瓷':
resetColor('rgba(241, 241, 241,.88)', 'rgb(27, 129, 197)');
break;
default:
resetColor(backgroundColor, textColor);
}
});
const bmapStyleURL = "/asset/get/s/data-1572317283167-8bAaywO7.json";
$.getJSON(bmapStyleURL, function (style) {
console.log(style);
for (key in style) {
if (key != '眼眸') {
let $option = $('<option>' + key + '</option>');
$option.data('json', style[key]);
$mapStyle.append($option);
}
}
$mapStyle.children().eq(3).prop('selected', true);
$mapStyle.trigger('change');
});
}, 100);
</script>
</body>
</html>
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] plainheart commented on issue #12829: Echarts cannot be rendered . Error: xAxis "0" not found
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #12829:
URL: https://github.com/apache/incubator-echarts/issues/12829#issuecomment-646538786
Examples can be provided on https://gallery.echartsjs.com/editor.html.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] echarts-bot[bot] commented on issue #12829: Echarts cannot be rendered . Error: xAxis "0" not found
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #12829:
URL: https://github.com/apache/incubator-echarts/issues/12829#issuecomment-646474638
This issue is not created using [issue template](https://ecomfe.github.io/echarts-issue-helper/) so I'm going to close it. 🙊
Sorry for this, but it helps save our maintainers' time so that more developers get helped.
Feel free to create another issue using the issue template.
If you think you have already made your point clear without the template, or your problem cannot be covered by it, you may re-open this issue again.
这个 issue 未使用 [issue 模板](https://ecomfe.github.io/echarts-issue-helper/?lang=zh-cn) 创建，所以我将关闭此 issue。
为此带来的麻烦我深表歉意，但是请理解这是为了节约社区维护者的时间，以更高效地服务社区的开发者群体。
如果您愿意，可以请使用 issue 模板重新创建 issue。
如果你认为虽然没有使用模板，但你已经提供了复现问题的充分描述，或者你的问题无法使用模板表达，也可以重新 open 这个 issue。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] plainheart closed issue #12829: Echarts cannot be rendered . Error: xAxis "0" not found
Posted by GitBox <gi...@apache.org>.
plainheart closed issue #12829:
URL: https://github.com/apache/incubator-echarts/issues/12829
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] plainheart edited a comment on issue #12829: Echarts cannot be rendered . Error: xAxis "0" not found
Posted by GitBox <gi...@apache.org>.
plainheart edited a comment on issue #12829:
URL: https://github.com/apache/incubator-echarts/issues/12829#issuecomment-646538786
Examples can be provided on https://gallery.echartsjs.com/editor.html or https://codepen.io/.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] plainheart commented on issue #12829: Echarts cannot be rendered . Error: xAxis "0" not found
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #12829:
URL: https://github.com/apache/incubator-echarts/issues/12829#issuecomment-646538284
I'm sorry for closing this issue. Please recreate another issue with a specific description and tidy format as the echarts-bot said.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org